dynamic - How to make jqGrid dynamically populate options list based on row data -

i using jqrid version 3.8.1 inline editing , each row in grid has several dropdown lists populate. when user edits row, need ajax query values each of these lists. i've seen this post regarding how that. appears dataurl , buildselect features standard answer here. there few issues can't figure out though:

1. the row user editing has value must passed dataurl value. example, each row contains field called "specialvalue" , row 1, specialvalue = 100. dataurl field row 1 "http://my.services.com?specialvalue=100". how do that?

2. each row in grid has 10 select boxes need populated. efficiency reasons, don't want make 10 separate ajax calls. better make 1 call data, split up, , fill each select box accordingly. possible? tried doing inside onselectrow grid ended ignoring values put in there (i'm guessing ordering of events fire when edit row).

edit:

after reading oleg's answers , working on more, it's clear me using dataurl , buildselect not going work me. version of jqgrid i'm using doesn't support using dataurl way need. , if did don't want send multiple separate requests each dropdown list.

i've decided 1 request when gridcomplete fires pull data needed dropdown lists single json structure. when user selects row inline editing, populate each list in row json structure (the code below uses getselectvaluesfromjson() function that--i don't give definition can imaging looks through structure , gets appropriate list of values in list box).

i have few candidate solutions i'm not 100% happy either one.

solution 1:

inside onselectrow, call editrow overriding on oneditfunc data out of grid need. assume value in field1 required values put list in field2.

onselectrow: function (index, status, e) {     jquery('#my_grid').jqgrid('editrow', index, true, function(rowid) {         var f1val = $('#my_grid').jqgrid('getcell', index, 'field1');         var selectvals = getselectvaluesfromjson(f1val); //gets data out of loaded json structure         var select = $('#my_grid').find('tr[id="' + index + '"] td[aria-describedby="my_grid_field2"] select');         _.each(selectvals, function(selectval) {             $(select).append($("<option></option>").attr("value", selectval).text(selectval));         });     }); } 

this works i'm hesitant line

var select = $('#my_grid').find('tr[id="' + index + '"] td[aria-describedby="my_grid_field2"] select'); 

which relies on aria-describedby attribute don't know about. seems hacky , brittle.

solution 2:

make use of beforeselectrow dynamically change model of field2 column when user selects row.

beforeselectrow: function(index, e) {     var f1val = getgridcellvalue('#my_grid', index, 'field1');     var values = getselectvaluesfromjson(f1val); //gets data out of loaded json structure     var valstr = "";     _.each(values, function(value) {         valstr += value + ":" + value + ";"     });     jquery('#grid_pipes').setcolprop('field2', { editoptions: { value: valstr } });     return true; } 

this works i'm not sure whether or not idea. valid dynamically change model of column that? if user has several rows selected @ same time? isn't there 1 model column? mean?

to answer of oleg's questions, datatype has been set function uses $.ajax post data server. think read that's not recommended approach anymore. inherited code i'm not sure why done way won't change unless there compelling reason.

the loadonce boolean not specified guess means defaults false.

here abbreviated version of column model (nothing terribly out of ordinary):

colmodel: [     { name: 'pk', index: 'pk', hidden: true, editable: true, sortable: true, search: true },     { name: 'field1', index: 'field1', hidden: true, editable: true, sortable: true, search: true },     { name: 'field2', index: 'field2', sortable: false, editable: true, search: false, edittype: "select", editoptions: {} },     { name: 'field3', index: 'field3', sortable: false, editable: true, search: false, edittype: "select", editoptions: {} },     ... ] 

you don't wrote version of jqgrid use currently, dataurl can defined callback function (rowid, value, name) parameters, have return url can build dynamically based on information. feature exist starting v4.5.3 (see the line). can use getcell, getrowdata or getlocalrow inside of callback data columns of row. can solve first problem relatively easy.

you second question seems me absolutely independent first one. it's better separate such questions in different posts allow searching engine better index information , other people find it.

there no simple way how solve second problem, 1 can sure suggest solution, 1 have know more details , how do. how start inline editing (do use inlinenav, formatter: "actions" or call editrow directly)? version of jqgrid (till version 4.7), free jqgrid or guriddo jqgrid js use? how columns selects defined in colmodel? datatype use , whether loadonce: true use? recommend post separate question information.

update: if have use old version of jqgrid can't generate dataurl full dynamically, because need add specialvalue=100" part url can follow trick described in many old answers (the first 1 here, choice on property names asked user misunderstood). can use ajaxselectoptions.data define data parameters of jquery.ajax request. problem can define only 1 ajaxselectoptions.data property. can add following jqgrid option:

ajaxselectoptions: {     data: {         specialvalue: function () {             var rowid = $mygrid.jqgrid("getgridparam", "selrow");             return $mygrid.jqgrid("getcell", rowid, "specialvalue");         }     } } 

($mygrid $("#grid"))

updated: used unknown functions getselectvaluesfromjson, getlookupvaluesfromjson in updated part of question. both of there seems use synchronous ajax request not good. set editoptions.value only one field2 instead of setting all selects.

onselectrow: function (rowid) {     var $mygrid = $(this);     $.ajax({         url: "someurl",         datatype: "json";         data: {             specialvalue: $mygrid.jqgrid("getcell", rowid, "field1")         },         success: function (data) {             // example response data have format:             // { "field2": ["v1", "v2", ...], "field3": ["v3", "v4", ...] }             var filed, str;             (filed in data) {                 if (data.hasownproperty(filed)) {                     str = $.map(data[filed], function (item) {                                 return item + ":" + item                             }).join(";");                     $mygrid.jqgrid("setcolprop", filed, {                         editoptions: {                             value: str                         }                     });                 }             }             $mygrid.jqgrid("editrow", rowid, true);         }     }); } 

nevertheless "solution 2" more close recommend you. it's not important whether use onselectrow or beforeselectrow. can make asynchronous ajax request server returns information all select need. after response server (inside of success callback) can set editoptions.value selects , can start editrow. in way sure editing of line use row specific options in select.

some additional remarks. recommend verify gridview: true option in grid. additionally suspect fill grid in not full correct way because have hidden pk column , use index instead of rowid first parameter of beforeselectrow , onselectrow. it's important understand current implementation of jqgrid always assign id attribute on every row (<tr> element) of grid. have to provide id information in every item of input data. if want to display id information user (and have column in colmodel primary key) should include key: true property in column definition. example can add key: true definition of pk column , have rowid (or index in case) same value pk. simplify many parts of code. example jqgrid send id parameter in editing request server. it's practical have pk in request. if use repeatitems: false format of jsonreader can include id: "pk" in jsonreader instead of having hidden pk column. informs jqgrid rowid pk. jqgrid save pk in id attribute of <tr> , don't need have additional <td style="display:none"> same information in grid.

the last remark. strictly recommend update retro version jqgrid 3.8.1 more recent version, example free jqgrid. if use no features (like font awesome example) have performance advantages, , of modern web browsers looks better. should understand jqgrid 3.8.1 tested old (and slow jquery 1.4.2). version used internet explorer 8 latest ie version (ie9 published later in march 2011) , it's more oriented on ie6/ie7. in modern chrome/firefox/safari can bad. want?