Usage of jQuery UI Multiselect within jqGrid

Question

I am trying to use the jQuery plugin UI Multiselect. The invoke of the UI Multiselect goes through $(".multiselect").multiselect(); The question is where should this call be placed in the jqgrid configuration? Should this be done within the OnSelectRow? At the moment I have following calls/definitions in the OnSelectRow:

    function (rowid) {
       grid.setColProp('available_film_id',{
       editoptions:{
       dataInit:function (el){$(el).addClass('multiselect')},
       size:5,
       multiple:true,
       dataUrl:'/ajax/selectlist/?q=getSelected&value='+rowid}});
    }
}

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

Am not sure but i think you will get answer by referring here answer by Byron.

if you need more demos, you can look here

edited May 23 '17 at 12:27

Community

1
1

answered Sep 20 '12 at 07:20

hridya pv

1,039
1
7
17

Thanks but it looks like completely another solution. It is not the plugin I mentioned above. – Anatoliy Sep 21 '12 at 12:56

tpeczek · Answer 2 · 2012-09-28T07:24:06.247

0

You can call mutliselect in your dataInit function:

dataInit: function (el) { setTimeout(function () { $(el).multiselect(); }, 50); }

The function will be called when the element is created.

UPDATE

Current version of Multiselect plugin seems to require the position of the element in the DOM. This event is raised before inserting the element into the DOM so use of setTimeout function is required to accomplish the desired action.

edited Sep 28 '12 at 07:24

answered Sep 20 '12 at 07:39

tpeczek

23,867
3
74
77

It sounds good, but it does not work within my setup. Have you already used this plugin (UI Multiselect)? – Anatoliy Sep 21 '12 at 12:54
@Anatoliy Yes, a number of times. In that case you need to provide more details of your setup as the general code is correct. – tpeczek Sep 21 '12 at 13:51
@Anatoliy I have updated the answer with aspect of DOM insertion. – tpeczek Sep 28 '12 at 07:24
So is this a race condition then? Are you relying on the browser placing the element into the DOM in 50 milliseconds or less? – d512 Mar 09 '15 at 04:52
@user1334007 In general a number of jQuery UI components depend on the element presence in the DOM. Depending on the browsers implementation this often affects the calculated position of the element. – tpeczek Mar 09 '15 at 08:46
@tpeczek, maybe so but there's still a race condition. If jqGrid doesn't put that listbox into the DOM before your timer expires, the multiselect plugin will have nothing to stylize. Even when it does work, the UI jumps around when the timer expires and the plugin stylizes the lists. And the longer you make your timer, the more apparent the UI jumping will be to the user. I wonder if jqGrid could (or does) provide another event handler instead of dataInit that could guarantee the presence of the lists in the DOM so we could use the multiselect plugin in there. – d512 Mar 09 '15 at 17:17
@user1334007 There is no race condition here. In fact the timeout could be 0 and there would still be no race. This is one of the tricks resulting from single threaded nature of JS processing. The execution of event resulting from `setTimeout` will start only after current processing is done. Using `setTimeout(..., 0);` is a common method used to make sure that some changes has been reflected in the DOM. – tpeczek Mar 09 '15 at 20:05
Ah, right you are. It's basically adding a new item on the queue to be processed on the next loop (http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) so you can be guaranteed that element will be in the DOM. Thanks for the explanation. – d512 Mar 09 '15 at 20:15

Usage of jQuery UI Multiselect within jqGrid

2 Answers2