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.

Why you don't use `editoptions: value` (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#select)? What you mean when you write that you need drop-down on "clicking the row"? Do you use cell editing mode or implemented inline editing on select row? In general inside `dataInit` you should **not overwrite** the contain of cell contain. If you need custom editing control you should use this: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#custom — Oleg, Feb 24 '11 at 11:34
well i am pretty mch new to this forum... so yet not accustomed with the buttons and the interface..... ofcourse if i get the ans i wd accept it ... if anywhere i havent done that... i m sorry it wasnt intentional... and the problem is .. its just the dummy data i would be actually implementing a json retuned from webservice ... but unfortunately this is not working only ... so how will i put the json from webservice itself (thats the actual idea) — Joy, Feb 24 '11 at 11:42
the main idea is the original content would remain as it is ... but when i would click the row.. it would go into an edit mode... and the dropdownlist would have the json (or list of items specifically not static .. it must be dynamic) loaded into the dropdownlist . .. the code above is just to test ... if the dropdown is getting populated or not.... when i click the jqGrid row — Joy, Feb 24 '11 at 11:47

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

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.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 24 '11 at 12:09

Oleg

220,925
34
403
798

i hav posted a fragment of my code. which u suggested . but still there are no results .. not sure what caused it – Joy Feb 24 '11 at 12:39

score 0 · Answer 2 · answered Feb 24 '11 at 12:21

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

try to look at the server response with respect of Fiddler (see http://www.fiddler2.com/fiddler2/) or Firebug (see http://getfirebug.com/). I suppose that you current implementation of your web service send the JSON string inside of SOAP XML. You should use ASMX, WCF and place corresponding attribute with `ResponseFormat = ResponseFormat.Json`. See http://stackoverflow.com/questions/3196569/returning-json-from-asmx-and-handling-it-correctly-in-javascript/3196640#3196640 for more informatin. — Oleg, Feb 24 '11 at 16:52

Bug in populating dropdown on clicking the row in a jqGrid

2 Answers2