JQGrid Edittype: 'select' using dataurl returns <select> with not saving select value

Question

I have a JQGrid column with edittype:\'Select\' using dataUrl to return a list of Accounts with groups for the different Account groups.

My issue: when saving the

Answer 1

The current version of jqGrid don't works with <optgroup> inside of <select>.

I find that the usage of <optgroup> could be helpful in some cases. So I debugged the jqGrid code a little and found out that one need to change only two lines of code of jqGrid (the lines 143-144 of the grid.inlinedit.js or the lines 8262-8263 of the jquery.jqGrid.src.js from jqGrid 4.1.1) from

tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();

to

tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();

or just to

tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();

to fix the problem.

If one need have support of selects having multiple: true attribute:

one should modify in the same way as above one more line (line 149) of the grid.inlinedit.js having the "select>option:selected". To make jqGrid with multiple: true attribute working with dataUrl property one have to fix one more line (the line 67) of the grid.inlinedit.js. One need change

if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
    $(elc).width($(elc).width());
}

to for example the following

if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
   cm[i].editoptions.multiple===true &&
   typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {

    $(elc).width($(elc).width());
}

This change will prevent setting of the very small width of the select before it is loaded by the $.ajax request from dataUrl. Probably one should place the same fix of the width inside of success event handler of the corresponding $.ajax call from grid.common.js where the data for dataUrl will be loaded. I tested my demos in IE9 and it is not needed to make the fix for IE9.

You can see the demos with the fixed jqGrid code here: the single select demo, the multiselect demo. You should take in the consideration, that there are no code for the "/Dropdown/GridSave" on the server which will be used in the editurl. Nevertheless you will see in Fiddeler of Firebug that the posted data, which will be send to the server, do contain the information about the selected item. If you want make the demo working locally you should modify the editurl to 'clientArray' and probably set additionally loadonce:true.