Bug in populating dropdown on clicking the row in a jqGrid

Question

I want to populate a jqGrid cell dropdownlist when I click the row. I am clicking the row but the dropdownlist isn't getting populated.

The code which I have written for populating the dropdownlist on edit or clicking the row is:

colModel: [
            { name: 'Emp_code', width: 50, sortable: false, align: "center" },
            { name: 'Emp_name', width: 200, sortable: false },
        //{ name: 'totalhours', width: 100, sortable: false, align: 'center', editable: true, edittype: "select", editoptions: { value: "1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9"} }
            {name: 'totalhours', index: 'totalhours', width: 100, sortable: false, align: 'center', editable: true, edittype: "select",
            editoptions:
            {
                dataInit: function(elem) {

                    $(elem).empty()
                    .append($('<option></option>').val("1").html("Apples"))
                    .append($('<option></option>').val("2").html("Oranges"));

                }
            }
        }
        ],

I want to populate the totalhours column on row click which would populate with apple and oranges, but somehow I am getting blank dropdowns. On row click the dropdown is shown but it's not populated.

Answer 1

If you need to get options item of select from the server you should use editoptions dataUrl and optionally buildSelect. If the server return JSON instead of HTML fragment like

<select><option value="1">Apples</option><option value="2">Oranges</option></select>

one can use buildSelect to convert the server response to the format. If the srever return JSON formatted string your implementation of buildSelect event handler can convert JSON string to the object and then construct the string <select>...</select> from the object.

You can find the corresponding code example for example here.

Answer 2

accordint to ur suggestion i did this ..

 colModel: [
            { name: 'Emp_code', width: 50, sortable: false, align: "center" },
            { name: 'Emp_name', width: 200, sortable: false },
        //{ name: 'totalhours', width: 100, sortable: false, align: 'center', editable: true, edittype: "select", editoptions: { value: "1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9"} }

           {name: 'totalhours', width: 100, sortable: false, align: 'center', editable: true, edittype: "select",
           editoptions: { dataUrl: '../Services/ServiceTest.asmx/GetListHours',
               buildSelect: function(data) {
                   alert('hello i am here ');
                   var response = jQuery.parseJSON(data.responseText);
                   var s = '<select>';
                   if (response && response.length) {
                       for (var i = 0, l = response.length; i < l; i++) {
                           var ri = response[i];
                           s += '<option value="' + ri + '">' + ri + '</option>';
                       }
                   }
                   return s + "</select>";
               }

           }
       }
        ],

and the corresponding webserivce i which i am calling for is :

public String GetListHours() 
    {
        List<int> list = new List<int> { };            
        for (int i = 0; i < 10; i++)
        {
            list.Add(i);
        }
        return JsonConvert.SerializeObject(list);
    }

but still when i am clicking the row the dropdownlist is showing blank... is there any event which should i cal through ? that should be fired when i am clicking a row ? to populate the dropdownlist ? above is the code which i tried to implement according to ur suggestion . but it seems like it doesnt even calling the dataurl to populate cause the function alert is not firing at all