jQuery UI menu inside a jqGrid cell

Question

I have created a grid and customized a column to contain a jquery UI menu like in the Split Button example

Everything works fine except for the fact that the menu window appear inside the cell causing a bad visual effect, that is, the cell height increase to make room for the menu window. Have a look at the following screenshot for a visual explanation (nevermind about the menu item in disabled state). enter image description here

Is there any way way to make the menu window appear on top of the table element in term of z-index?

Thanks very much for your valuable help, community :)

EDIT as per comment request:

The code to create the splitbutton menu is the following. First the column model markup

{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
  formatter: function (cellvalue, options, rowObject) {
      var markup = "<div>" +
                      "<div class='actionsButtonset'>" +
                          "<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
                          "<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
                      "</div>" +
                      "<ul class='actionMenu'>" +
                          "<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
                      "</ul>" +
                   "</div>";
      return markup;
  }
}

Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items

var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
    var button = $(this);
    var umltID = button.attr('rel');
    button.button().click(function (event) {
        event.preventDefault();
    });
    var isPeriodLocked = (button.attr('plock') === 'true');
    if (!isPeriodLocked) {
        var isConfirmAvailable = ($(this).attr('rev') === 'true');
        if (!isConfirmAvailable) {
            button.button({ disabled: true });
        }
    } else {
        button.button({ disabled: true });
    }
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
    isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
    var button = $(this);
    button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
    button.click(function (event) {
        var menu = $(this).parent().next().show();
        menu.position({
            my: 'left top',
            at: 'left bottom',
            of: this
        });
        $(document).on('click', function () {
            menu.hide();
        });
        return false;
     });
     $('div.actionsButtonset').buttonset();
     var menuElement = button.parent().next();
     menuElement.hide();
     menuElement.menu({
         select: function (event, ui) {
             var umltID = ui.item.children().attr('rel');
             event.preventDefault();
         }
     });
     if (!isCurrent) {
         var isPeriodLocked = ($(this).attr('plock') === 'true');
         if (isPeriodLocked) {
             menuElement.menu({ disabled: false });
         } else {
             var isUmltLocked = ($(this).attr('rev') === 'true');
             menuElement.menu({ disabled: !isUmltLocked });
         }
     } else {
         //The current period is always unlocked
         menuElement.menu({ disabled: true });
     }
});

Could you include more details how you implemented Split Button in the grid? The code of custom formatter for the column with buttons and the code (probably inside of `loadComplete`) which creates the buttons and creates menus is the origin of the problem. Do you specified any `z-index` value for `
` element of the menu? You can try to use `
` for example. — Oleg, Oct 03 '13 at 12:25
@Oleg: Please have a look at my edit. I have seen your example that works good. Could you please help me in understanding which differences are in place? Thanks a lot! — Lorenzo, Oct 07 '13 at 13:16
One of the main difference is **the place** of `
` which built the popup menu. You place it **inside of the cell** and the `` of the cell is indirect parent of the menu. I place `
` in the `` (it's parent is the ``). It's the main reason why you have `z-index` and clipping problems (menu in *my demo* can be display out of the grid) for the menu. Moreover you will never display multiple popup menus in different cells at the same time. So it don't needed to create `
` in **every** row. — Oleg, Oct 07 '13 at 13:49
In my implementation I show how to get rowid of clicked button. All other information one can get with respect of jqGrid API from `rowid` — Oleg, Oct 07 '13 at 13:49
@Oleg: Ok. I am trying to get the menu out of the cell and to make a revision of the code using your suggestions. I'll keep you informed. Thanks! — Lorenzo, Oct 07 '13 at 13:55

score 3 · Accepted Answer · answered Oct 06 '13 at 18:36

3

I prepared the demo for you which demonstrates how Split Button can be used inside of jqGrid. It displays

enter image description here

More detailed explanation of the demo I'll post later. Probably you will understand all yourself after examining of the code.

answered Oct 06 '13 at 18:36

Oleg

220,925
34
403
798

Would like to upvote again! Thanks very much Oleg :) – Lorenzo Oct 07 '13 at 16:36
@Oleg, Sample works great, thx. My code calls setrowdata, however, and since the code to set up the buttons as menus runs on the loadcomplete, when the formatter returns the after setgriddata, they don't get re-"buttonized". any thoughts on how to invoke the code in the loadcomplete after formatting? – user1689571 Jan 22 '15 at 16:34
@user1689571: Sorry, but I didn't understand what you mean. Probably you can open new question where you explains the problem more detailed and post here the link to the question. – Oleg Jan 22 '15 at 17:18
of course. http://stackoverflow.com/questions/28095634/jqgrid-setrowdata-event-after-formatter-called – user1689571 Jan 22 '15 at 18:00
so, the solution was to move the menu div outside the td ? – Jure Špik Apr 30 '15 at 12:51
1

@JureŠpik: The answer provide an example of the possible implementation. It uses custom formatter to place two `` in the column and the to use jQuery UI Button, jQuery UI Menu and Position and of cause `jQuery.click`. The menu itself will be created dynamically, but it's direct parent in DOM hierarchy (it's direct child of the ``) is not really important. – Oleg Apr 30 '15 at 13:11

jQuery UI menu inside a jqGrid cell

1 Answers1

Linked