Configure Add / Edit dialog in jqGrid

Question

Sorry, I can not send images, I'm too new.

In the jqGrid Add / Edit dialog box, I would like to load a list of selectable items based on a previously selected selection. In the above figure, the value selection should be loaded based on the value selected in the criteria selection. I believe the way to use is to use dataurl in the editoptions object, but I am having problems in this regard. The first concern was based on the documentation here , it seems that there is an event available to fire when the criteria value changes, which will allow me to update the list of values.

I am also confused about how data should be returned from an ajax request. The documentation says:

Setting the editoptions dataUrl parameter The editoptions dataUrl parameter is valid only for the edittype: select element. The dataUrl parameter represents the URL from which the html selector should be selected. When this parameter is set, the item will be populated with values ​​from the AJAX request. The data must be a valid HTML selection element with the desired parameters "

Does this mean that I will need to generate html and return this as part of the response? I used to transfer all my data using json.

Answer 1

jqGrid does not have simple support for dependent editoptions in editoptions . Therefore, for implementation it is necessary to use the change event on the main flag to manually update the list of options for the second (dependent) choice.

In the demo you will find how you can implement dependent selections. I used the "local" data type in the dataUrl and therefore set the value editoptions property instead of dataUrl , but the main scheme that needs to be done remains unchanged. In addition, in the demo I use not only form editing, but also built-in editing. The code works in both cases. Since jqGrid does not support local editing in form editing mode, submitting forms does not work. I could use the tricks I described here here , but the code will be much longer and will contain many things that are far from your main question. So I decided to post the code in a form where the submission is not working.

Below you will find the code from the demo:

 var countries = { '1': 'US', '2': 'UK' }, states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' }, statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' }, statesOfUK = { '5': 'London', '6': 'Oxford' }, // the next maps contries by ids to states statesOfCountry = { '1': statesOfUS, '2': statesOfUK }, mydata = [ { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" }, { id: '1', Country: '1', State: '3', Name: "Jim Morrison" }, { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" }, { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" } ], lastSel = -1, grid = $("#list"), resetStatesValues = function () { // set 'value' property of the editoptions to initial state grid.jqGrid('setColProp', 'State', { editoptions: { value: states} }); }; grid.jqGrid({ data: mydata, datatype: 'local', colModel: [ { name: 'Name', width: 200 }, { name: 'Country', width: 100, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: countries, dataInit: function (elem) { var v = $(elem).val(); // to have short list of options which corresponds to the country // from the row we have to change temporary the column property grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} }); }, dataEvents: [ { type: 'change', fn: function (e) { // build 'State' options based on the selected 'Country' value var v = $(e.target).val(), sc = statesOfCountry[v], newOptions = '', stateId, form, row; for (stateId in sc) { if (sc.hasOwnProperty(stateId)) { newOptions += '<option role="option" value="' + stateId + '">' + states[stateId] + '</option>'; } } resetStatesValues(); // populate the subset of contries if ($(e.target).is('.FormElement')) { // form editing form = $(e.target).closest('form.FormGrid'); $("select#State.FormElement", form[0]).html(newOptions); } else { // inline editing row = $(e.target).closest('tr.jqgrow'); $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions); } } } ] } }, { name: 'State', width: 100, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: states } } ], onSelectRow: function (id) { if (id && id !== lastSel) { if (lastSel !== -1) { resetStatesValues(); grid.jqGrid('restoreRow', lastSel); } lastSel = id; } }, ondblClickRow: function (id) { if (id && id !== lastSel) { grid.jqGrid('restoreRow', lastSel); lastSel = id; } resetStatesValues(); grid.jqGrid('editRow', id, true, null, null, 'clientArray', null, function () { // aftersavefunc resetStatesValues(); }); return; }, editurl: 'clientArray', sortname: 'Name', ignoreCase: true, height: '100%', viewrecords: true, rownumbers: true, sortorder: "desc", pager: '#pager', caption: "Demonstrate dependend select/dropdown lists (edit on double-click)" }).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true }, { // edit options recreateForm: true, viewPagerButtons: false, onClose: function () { resetStatesValues(); } }, { // add options recreateForm: true, viewPagerButtons: false, onClose: function () { resetStatesValues(); } }); 

UPDATED . See the “UPDATED 2” part of the answer for the latest version on the demo.