Is there anyway to include a MultiSelect Combobox in a jqGrid?

Question

I have a jqGrid and I want one column to be a multiselect combobox. I got a plugin from,

http://www.abeautifulsite.net/blog/2008/04/jquery-multiselect/

How to integrate those, and how to get the selected values?

Parshall

I personally prefer another multiselect plugin, but in any way you should clear what you mean under "including" of multiselect combobox in jqGrid. Do you mean searching or editing (which one editing mode) or something else? – Chu

ok it's fine, I should be able to edit the multiselect combobox. – Parshall

You still don't answer which editing mode you used (inline editing, form editing, cell editing). In general you should just initialize plugin inside of dataInit but it could be different small things which need be done for example to have correct width and height of the control. Such "small" things can be different in every editing mode. – Chu

I dnt know what exactly inline or form editing means This is what happening If i select the row with mouse single click, the fields are becoming editable The requirement is, now one of the editable columns, i just see a simple dropdown combo box. I want that as a multi select combo box i.e The drop down should have check boxes inside. Simple , a dropdown with check-able items – Parshall

You have to have the basic knowledge about the product if you want to use it. You should look at the official jqGrid demo page and look at the documentation (for example here you will see description editing modes). If you don't know the basics you will have problem to understand the answer on your question. – Chu

Answer 1

You can use jQuery UI MultiSelect Widget for example to implement multiselect with checkboxes.

The demo shows how you can implement this. You will have the results like the following

You can customize multiselect plugin using different options. In the demo I used the following code

edittype: 'select', editoptions: {
    value: 'FE:FedEx;TN:TNT;IN:Intim',
    dataInit: function (elem) {
        setTimeout(function () {
            $(elem).multiselect({
                minWidth: 100, //'auto',
                height: "auto",
                selectedList: 2,
                checkAllText: "all",
                uncheckAllText: "no",
                noneSelectedText: "Any",
                open: function () {
                    var $menu = $(".ui-multiselect-menu:visible");
                    $menu.width("auto");
                    return;
                }
            });
        }, 50);
    },
    multiple: true,
    defaultValue: 'IN'
}

I should mention that you can edit multiple selectable list without using any plugins. The only disadvantage is that the user interface will be not so nice. The next demo shows how all works without multiselect plugin.

UPDATED: If you need to set all rows in editing mode directly after the loading you can do this like in the next demo.

Chu

Thanks for your answer Oleg, but this doesn't serve the purpose for me.The value of dropdown in one row changes if I go for dropdown in another row. I think it's getting deactivated. I want the values to be present until all rows are edited and at the end I want to save all the values at once. Awaiting your answer. Thanks again – Parshall

@sainath: I don't full understand what you want. Do you want implement dependent dropdown lists or you want to have enabled dropdown in every row? I see not much sense from the last one because the dropdown controls shows the same information as the text "FedEx" or "FedEx, TNT". Editing of multiple rows at one and saving all to the server it's absolutely another problem. I don't recommend you to do this, but the description of reasons is long. You can have serious concurrency problem in the implementation of the behavior in multi-user environment. – Chu

No no, the scenario doesn't include multi-user environment. It's a single user at an instant. There'll be absolutely no concurrency problems. I want dropdowns enabled in every row and the values selected to be present until I store them to DB. – Parshall

@sainath: In the case you can just call editRow in the loop for all rows of the grid inside of loadComplete. It will start the inline editing. I have to mention that I know no practical case where you have Database and you can be sure that nobody else will be able to edit the database data. If you have database then more as one user can modify the data. If you open web page you can go away and come back to finish modification of old data and overwrite more recent data. If you directly save the row after the modification it works very quickly and the problem will be not so hard. – Chu

@sainath: Here is an example of what you can do. – Chu

Heyy Oleg..!! I got a prblm again.. What should I have Opearation on one column and corresponding operations(options) on other column. In this case the options are different in each row.. And how to select options dynamically,customized from db input?? Plz see into this..!! Thanks in advance – Parshall

@sainath: Sorry, but I don't full understand which problem you has. Which operation you mean? If you mean different search operations that you should just use different sopt in searchoptions option. If you need to set select options dynamically you can use dataUrl property instead of value property of editoptions. – Chu

I just meant to say there are keys and corresponding values each as separate columns, where the value options(values) for each key changes.. In the example you've given there are fixed set of suppliers for every entry.. – Parshall

how to add scrollbar? – Caryloncaryn

@aayushi: Sorry, but I don't understand your question. Which schrollbar? Where to add? What version of jqGrid you use (can use) and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7)?... – Chu

hello , i had added a multiselect dropdown in my jqgrid add popup , it is doing multiple select but showing only one record in a box at a time , so height is not getting set , i had used hight:auto and max-height attributes but none works , so i want to display at least 5 records at a time in a dropdown and scrollbar for more records to display – Caryloncaryn

@aayushi: You should open new question, where you post your JavaScript code or/and the demo and where you describe the problem detailed. I still not understand what you do, which version from which fork of jqGrid you use, which editing mode (probably form editing) you use, which multiple select you use (only select or some multiselect widget or the control like select2). – Chu