jqgrid select list column with formatter option not working

Question

I'm using jqGrid JS v5.3.2. I have a key/value pair list like this on the server

key|value
23|abc
12|bdc
100|fghe

Right now, I'm using two columns to show/edit this list like below: ...

{
    label: 'thelist',
    name: 'key',
    hidden: true,
    editable: true,
    editrules: {
        edithidden: true
    },
    edittype: 'select',
    editoptions: {
        dataUrl: function () {
            return "getlisthtmlfromserverURL";
        }
    }
},
{
    label: 'thelist',
    name: 'value',
    width: 150
},

...

I have tried formatter: 'select' on above first column to eliminate the need of second column (/having two jqgrid columns serving one data field), but it doesn't show the text/value of the select. My guess is that the jqgrid load (remote) select content during edit time, so there is nothing to show. The question is how can I use one column in colModel to show and edit a data field of above list? TIA

Answer 1

I suppose you haven't read the docs here , so you should know that the formatter of type select does not support dataUrl option - it support only string and object values - i.e the values should be predefined, before they come to grid.

In order to have one field you should first get the key/value before to construct the grid and pass it as as value parameter in formatoptions.

{
    name:'key', 
    formatter:'select', 
    formatoptions : {value:"23:abc;12:bdc;100:fghe"},
    edittype: 'select',
    editoptions: {
        value:"23:abc;12:bdc;100:fghe"
    }
} 

UPDATE

In case of custom option to preload the selects it is not so difficult. You should just do

$.ajax({
    url : "url_to get_select(s)",
    success : functon(....) {
        // build your select string here 
        // call the jqGrid with that string.
        $(...).jqGrid({...});
    }
})