JQgrid Multiselect with eric hynds multiselect and dataurl

Question

I try to use a multiple select which is filled with a data url within jqgrid inline editing. This works fine right now.

But the handling is not very comfortable. So I try to add Eric Hynds JQuery UI Multiselect (http://www.erichynds.com/blog/jquery-ui-multiselect-widget)

{ editable: true, edittype: 'select', editoptions: { dataInit: function (elem) {
  setTimeout(function () {
    $(elem).multiselect({
      minWidth: 100,
      height: 'auto',
      selectedList: 2,
      checkAllText: 'all',
      uncheckAllText: 'no',
      noneSelectedText: 'Any',
      open: function() {
        var $menu = $('.ui-multiselect-menu:visible');
        $menu.width('auto');
        return;
      }
    });
 }, 50);
 }, dataUrl: '/Users', "multiple":true },   width: 11, name: 'ExcludedUsers' }

This brings up the jQuery UI multiselect widget on row editing but the multiselect widget is empty. As it seems the dataurl content is loaded after the initdata function is called and the multiselect widget is not able to register on the select element loaded by the dataurl.

How can I fix this?

Steve Steve · Accepted Answer · 2013-09-06T15:40:33

The loading of select element took longer than the 50ms of the setTimeout function. After changing the value to 150 it worked perfect.

setTimeout(function () {
$(elem).multiselect({
  minWidth: 100,
  height: 'auto',
  selectedList: 2,
  checkAllText: 'all',
  uncheckAllText: 'no',
  noneSelectedText: 'Any',
  open: function() {
    var $menu = $('.ui-multiselect-menu:visible');
    $menu.width('auto');
    return;
  }
});
}, 150);

JQgrid Multiselect with eric hynds multiselect and dataurl

1 Answers