jqgrid 4.5.4 formatter:select not working for duplicate values in combo box

Question

I am using jqGrid 4.5.4 to build a jqGrid. I have problem in editing combobox. My combobox has city names. In combo box there are two cities with same name but different key values. While editing a row in jqgrid dropdown populated with the city of different kay value. I used formatter:'select'. But it is not working.

My code is as follows ::

var jQuery = $.noConflict();
var lastSel = 0;
jQuery(document).ready(function(){
    jQuery.ajax({
        // The link we are accessing.
        url: <%= "'" +url_1.toString()+"'"%>,
        // The type of request.
        type: "get",
        // The type of data that is getting returned.
        dataType: "json"
    }).done(function(data){
            jQuery("#list2").jqGrid({
                url:<%= "'" +url.toString()+"'"%>,
                datatype:"json",
                mtype:"POST",
                colNames:['localityId','City','Locality'],
                colModel:[
                    {
                            name:'localityId',
                            index:'localityId',
                            width:240,
                            key:true,
                            editrules:{edithidden:false, required:true},
                            editable:true,
                            hidden:true
                    },
                    {
                            name:'cityId',
                            index:'cityId',
                            width:240,
                            editable:true, 
                            edittype:'select',
                            formatter:'select',
                            sortable:true,
                            editrules:{ required:true},
                            editoptions: {  
                                value:  data                                            
                            }       
                    },
                    {
                            name:'locality',
                            index:'locality', 
                            width:240,
                            sortable:true,
                            editable:true, 
                            edittype:'text'
                    }
                ],
                rowNum:10, 
                rowList:[10,20,30], 
                pager: '#pager2', 
                sortname: 'locality',
                editurl:<%= "'" +url_edit.toString()+"'"%>,
                viewrecords: true,
                multiselect: true, 
                sortorder: "desc", 
                caption:"Locality Master"
            });

            jQuery("#list2").navGrid(
                                      '#pager2',
                                      {add:true, edit:true, del:true},
                                      {},
                                      {},
                                      {},
                                      {}
                                    );
    });
});

If formatter='select' is removed then cityId is shown on screen and then if the row is edited then correct city is selected in dropdown. What is the problem with formatter='select' and editoption.

Answer 1

I could reproduce the problem which you described. The problem is clear: jqGrid use formatter: "select" which replaces the values (like 2, 4, 35) to the strings which will be saved in the grid cell (in <td>). The cell have no information about the original value of select.

So it just calls unformatter of the formatter "select" at the initializing of the form editing. If you have the same text for different select values then the standard unformatter can't distinguish both "Mollem" having originally different values 2 and 35. So the unformatter returns always the first found value: `2.

I don't familiar in geography of India, but I can imagine that there are exists really two different city wit the same name. I would recommend you to have different texts for selects so that the user can clear see which one "Mollem" are chosen. On the other side one could include different "Mollem" under different option group (<optgroup>). In the case the problem will be exactly like in your original question.

I described in the answer how one can assign data attributes to the row (<tr>) to save custom additional information. I suggest to use the same approach with the cells (<td>). I want to have the grid looks like

The corresponding code is very easy. One can define cityId column something like

{
    name: "cityId", formatter: "select", edittype: "select",
    editrules: { required: true }, editoptions: { value: data },
    cellattr: function (rowId, value, rawObject, cm, rdata) {
        return ' data-val="' + rawObject.cityId + '"';
    },
    unformat: function (cellText, options, $cell) {
        return String($cell.data("val"));
    }
}

Additionally I overwrite the default unformatter of formatter: select with my custom implementation which get the value directly from data-val attribute: String($cell.data("val")).

The demo (you can compare it with another demo with original problem) uses additionally dataUrl: "ManOptGroup.htm" with ManOptGroup.htm:

<select>
    <optgroup label="Group 1">
        <option value="1" title="Arambol (Group 1)">Arambol</option>
        <option value="2" title="Mollem (Group 1)">Mollem</option>
        <option value="3" title="Bicholim (Group 1)">Bicholim</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="4" title="Mapusa (Group 2)">Mapusa</option>
        <option value="35" title="Mollem (Group 2)">Mollem</option>
    </optgroup>
</select>

It improve the visibility of the select only to make easier to distinguish both Mollem. The resulting Edit form looks now like