jquery - is there anyway to have multiple columns in jqgrid, read the same source data for dropdowns?

Question

I have a case where i have multiple columns in jqGrid that source the same list to populate the dropdown.

   { name: "Manager", index: "Manager", width: 120, editable: true, edittype: "select", editoptions: { dataUrl: "/Person/GetSelectData" }, editrules: { required: false} },

  { name: "Delegate", index: "Delegate", width: 120, editable: true, edittype: "select", editoptions: { dataUrl: "/Person/GetSelectData" }, editrules: { required: false} },

I wanted to see if there is a way to have tihs work above without two seperate ajax calls to the same action just to get the same list of data:

   dataUrl: "/Person/GetSelectData"

so I can call it once and have the list of items linked to both columns? Is that possible in jqGrid?

Answer 1

Any implementation of what you want will mean some kind of caching of the data for "/Person/GetSelectData". One way which I would prefer myself is the usage of value instead of dataUrl. The list of select values can be included in the main response to the server which fill the grid. In the case the action used in url can returns additional data. You can use the returned data inside of value defined as a function or you can set the value inside of beforeProcessing alternatively. To make my suggestion more clear I explain it on an example.

The first way: usage value as function. One can include the data which you returns typically in "/Person/GetSelectData" inside of main JSON response. For example you can use userdata (or any other extensions of the input data):

{
    "rows": [
        ...
    ],
    "userdata": {
        "Persons": "Bill:Bill;Oleg:Oleg;Leora:Leora"
    }
}

Then one could use

beforeProcessing: function (data) {
    var $self = $(this), userData = data.userdata, persons, selectOptions;
    if (userData && userData.Persons) {
        persons = userData.Persons;
        selectOptions = {
            searchoptions: { value: ":All;" + persons }, // for toolbar search
            stype: "select",
            editoptions: { value: persons },
            edittype: "select"
        };
        $self.jqGrid("setColProp", "Manager", selectOptions);
        $self.jqGrid("setColProp", "Delegate", selectOptions);
    }
}

By the way one can even use formatter: "select" for "Manager" and "Delegate" columns. It allows to use ids instead of names. For example

"Persons": "3:Bill;1:Oleg;2:Leora"

One should add formatter: "select" to selectOptions too. It allows to use ids 3, 1 and 2 inside of the main data (rows part of JSON data). The standard way with the usage of dataUrl don't allow to use formatter: "select".

I recommend you to read the answer, this one and this one for more information about usage beforeProcessing for dynamic modification of the grid.