title: jQuery UI menu inside a jqGrid cell
body: <p>I have created a grid and customized a column to contain a jquery UI menu like in the <a href="http://jqueryui.com/button/#splitbutton" rel="nofollow noreferrer">Split Button example</a></p>
  
  <p>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).
  <img src="https://i.stack.imgur.com/sNOXn.png" alt="enter image description here"></p>
  
  <p>Is there any way way to make the menu window appear on top of the table element in term of z-index?</p>
  
  <p>Thanks very much for your valuable help, community :)</p>
  
  <p><strong>EDIT as per comment request:</strong></p>
  
  <p>The code to create the splitbutton menu is the following. First the column model markup</p>
  
  <pre><code>{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
    formatter: function (cellvalue, options, rowObject) {
        var markup = "&lt;div&gt;" +
                        "&lt;div class='actionsButtonset'&gt;" +
                            "&lt;button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'&gt;Confirm&lt;/button&gt;" +
                            "&lt;button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + "&gt;Select&lt;/button&gt;" +
                        "&lt;/div&gt;" +
                        "&lt;ul class='actionMenu'&gt;" +
                            "&lt;li&gt;&lt;a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'&gt;Unlock&lt;/a&gt;&lt;/li&gt;" +
                        "&lt;/ul&gt;" +
                     "&lt;/div&gt;";
        return markup;
    }
  }
  </code></pre>
  
  <p>Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items</p>
  
  <pre><code>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 &amp;&amp; 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 });
       }
  });
  </code></pre>