JqGrid - Javascript grid column model union and JSON response

Question

Is it possible to combine javascript file of column model and JSON response of raw data into 1 file?

Oleg - here you go:

JSON - codes.json

{ "codes":[ { "code" : "WFH - Work From Home" }, { "code" : "OST - Onsite" } ]} 

dataUrl and buildSelect - this creates an empty selection window

  editoptions: { dataUrl: 'http://localhost/json/codes.json', type: "GET", dataType: "json", contentType: "application/x-javascript; charset=utf-8", async: "true", buildSelect: function(response){ var s = '<select>'; $.each(response.codes, function(index, codes){ s.append("<option>"+codes.code+"</option>"); }); return s + '</select>'; } }}, 

Answer 1

You should change the buildSelect code buildSelect something like the following

 buildSelect: function (data) { var s = '<select>', codes, i, l, code, prop; if (data && data.codes) { codes = data.codes; for (i = 0, l = codes.length; i < l; i++) { code = codes[i]; // enumerate properties of code object for (prop in code) { if (code.hasOwnProperty(prop)) { s += '<option value="' + prop + '">' + code[prop] + '</option>'; break; // we need only the first property } } } } return s + "</select>"; } 

In addition, you should use ajaxSelectOptions to set any parameters for the corresponding $.ajax request that you use jqGrid if it receives data from the server. In any case, you should use relative URLs such as json/codes.json or /json/codes.json instead of http://localhost/json/codes.json .

An example of ajaxSelectOptions parameter might be the following

 ajaxSelectOptions: { dataType: 'json', cache: false } 

If contentType: "application/x-javascript; charset=utf-8" is really required contentType: "application/x-javascript; charset=utf-8" , you can add it as an additional property of ajaxSelectOptions .

As you can see from the demo , the selection will be made correctly from your JSON data using the buildSelect function. The choice looks like

 <select role="select" id="2_code" name="code"> <option value="code1" role="option">WFH - Work From Home</option> <option value="code2" role="option">OST - Onsite</option> </select>