I answered on very close questions here and here. In other words you can either use caching options of HTTP header or to use editoptions.value
instead of editoptions.dataUrl
.
I described in the answer and this two previous one (this and this) how one can set editoptions.value
dynamically inside of beforeProcessing
callback. One need extend the responses from the server used to fill the grid with additional information (with the data like the data returned from editoptions.dataUrl
). In my opinion it implements the best compromis between caching of editoptions.dataUrl
data and refreshing of the data by reloading of the grid. One can still hold cached editoptions.dataUrl
data on the server side.
Alternatively one can use more simple way where one makes manual Ajax request to editoptions.dataUrl
once after creating of the grid and one can set editoptions.value
inside of success
(done
) callback of the Ajax request. The code will be about the following
// create grid
$("#grid").jqGrid({
colModel: [
{ name: "PMOPerson" },
...
],
...
});
// make separate asynchronous Ajax request to the server and set
// edittype: "select", editoptions: { value: ... }
setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson");
The code of setSelectOptionValues
depends on the format of JSON data which you use to communicate with URL like "/Person/GetSelectData"
. For example if the server returns just array of strings wich should be the text and the value of options of the <select>
then the could could be the following
var setSelectOptionValues = function (getJsonUrl, myGrid, colModelColumnName) {
$.getJSON(
getJsonUrl,
function (data) {
var i, selectedOptions = '', datai, dn, colModelColumn;
for (i = 0; i < data.length; i += 1) {
if (i > 0) {
selectedOptions += ';';
}
else {
selectedOptions = "";
}
datai = data[i];
if (typeof datai === 'string') {
selectedOptions += datai;
selectedOptions += ':';
selectedOptions += datai;
}
}
myGrid.jqGrid("setColProp", colModelColumnName, {
edittype: "select",
editoptions: { value: selectedOptions }
});
}
);
};
The setting of editoptions.value
will be done asynchronously inside of setSelectOptionValues
. So it can be that the grid will be filled before the editoptions.value
will be set. On the other side editoptions.value
will be used only during editing. The response time from "/Person/GetSelectData"
will be typically quick enough and the value editoptions.value
will be set before the user start editing. If you want be absolutely sure you can still hold editoptions.dataUrl
. In the case editoptions.dataUrl
will be used only if the user quickly as the server with responding on "/Person/GetSelectData"
. You can change explicit call of
setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson");
with getting of colModel
using getGridParam
, the loop through all colModel
items and calling of setSelectOptionValues
for all items which has editoptions.dataUrl
.
The main restriction of the last approach: you can't use formatter: "select"
(just edittype: "select"
only). If you fill grid data with ids and editoptions.value
or formatoptions.value
provides the mapping of ids to the texts then I would recommend you to use the first approach with beforeProcessing
callback.