jquery - jqGrid dynamic select option

Question

I'm creating a jqgrid with drop down columns and I'm using cell editing. I need the options of the drop down columns to change dynamically and I've tried implementing this by setting the column to be:

{ name: "AccountLookup", index: "AccountLookup", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select" },

and then in the beforeCellEdit event I have:

beforeEditCell: function(id, name, val, iRow, iCol) {
        if(name=='AccountLookup') {             
            var listdata = GetLookupValues(id, name);
            if (listdata == null) listdata = "1:1";                              
            jQuery("#grid").setColProp(name, { editoptions: { value: listdata.toString()} })                                
        }
    },

GetLookupValues just returns a string in the format "1:One;2:Two" etc. That works fine however the options are populated one click behind - ie i click on AccountID in row 1, and the dropdown is empty, however when I then click on AccountID in row 3 the options I set in the row 1 click are shown in the row 3 click. And so on. So always one click behind.

Is there another way of achieving what I need? Bacially the dropdown options displayed are always changing and I need to load them as user enters the cell for editing. Perhaps I can somehow get at the select control in the beforeEditCell event and manually enter its values instead of using the setColProp call? If so could I get an example of doing that please?

Another thing - if the dropdown is empty and a user doesn't cancel the cell edit, the grid script throws an error. I'm using clientarray editing if that makes a difference.

Answer 1

You could use the dataInit option, like this:

{ name: "AccountLookup", index: "AccountLookup", width: 90,
    editable: true, resizable: true, edittype: "select", formatter: "select",
    editoptions: { dataInit: function( elem )
    {
        $(elem).empty()
            .append("<option value='1'>Apples</option>")
            .append("<option value='2'>Oranges</option>");
    } } }

Just replace the static Apples & Oranges options with your GetLookupValues() function.