How to add dynamic dropdown values in jQgrid?

Question

In the editOptions for select dropdown we pass some static values after the instantiate of the grid_data. Everything works fine until we choose editing. As the data remains constant and static.

All the dropdown remains same. But this should not happen, it has to load the appropriate data to the rows which should be dynamic.

var data = {
        "id" : "cityGrid",
        "grid_data" : response,
        "colNames" : ['City Name','Select State','local'],
        "colModel": [       
            {"name":'cityName',"index":'cityName', "width":150,"editable": true,"editoptions":{"size":"20","maxlength":"30"}},
            {"name":'selectState',"index":'selectState',"width":90,"editable": true,"edittype":"select","editoptions":{"value":"TN:Tamilnadu;AP:Andhrapradesh;MP:MAdhyapradesh",
    "class":"chosen-select","width":200,"custom":true,"custom_func":util.applyChosen}},
            {"name":'local',"index":'local', "width":70, "editable": true,"edittype":"checkbox","editoptions": {"value":"Yes:No"},"unformat": "aceSwitch"}
        ],
        "editurl": "/dummy.html",
        "caption": "City Information"       
    };

"editoptions":{"value":"TN:Tamilnadu;AP:Andhrapradesh;MP:MAdhyapradesh"

I also came across dataUrl passing after few search results. But it was not upto the mark as i need to send a param with it which is not possible there.

And even thought of taking the value of one particular row data and make it select on top and load rest of with static as i use the chosen form of data which triggers on keypress and my problem would get solve. The problem here is with editing with two types one with single row and multirow.

This is a phase where i got struck. Has anybody solved this problem. Any new version of jQgrid has a answer to this problem?

Thanks in advance

@kpblc - as you can see, i am applying chosen through my custom function. That doesnt matter. But the values in editoptions. How to configure relative to that particular row? — Mithun Shreevatsa, Nov 27 '14 at 11:50
@Mithun: Your question is not full clear. One can guess that you construct ` — Oleg, Nov 27 '14 at 15:11
@Mithun: The `data` looks like be loaded from the server. Why you just don't generate the `editoptions.value` *dynamically* on the server and then return the `data`? By the way you can do use `dataUrl` with parameters, but it will not help if you need `formatter: "select"`. Alternatively you can set `editoptions.value` *dynamically* in the server response from grid `url` and to use `beforeProcessing` to change `editoptions.value` I could send you the references to the corresponding code examples if needed. — Oleg, Nov 27 '14 at 15:15
Thanks for your useful response @Oleg. I was thinking of the same way as i told but i left my thoughts because of its feasibility. Please send me the links or references, so that i can work on the same. It would be really helpful — Mithun Shreevatsa, Nov 27 '14 at 16:57

score 1 · Answer 1 · edited May 23 '17 at 10:33

First of all you do can generate dataUrl dynamically based. The easiest way would be to define dataUrl as callback function: dataUrl: function (rowid, value, name) { ... }.

On the other side it seems that you need to generate select with <option> where value is not the same as the displayed text: <option value="TN">Tamilnadu</option>. In the case the value TN will be saved in the column after editing and so you should probably hold (to fill) the corresponding column with data like TN, AP, MP instead of Tamilnadu, Andhrapradesh, MAdhyapradesh. You should use formatter: "select" (see here) to display input values TN, AP, MP like Tamilnadu, Andhrapradesh, MAdhyapradesh. The formatter formatter: "select" uses formatoptions.value or (it it's not defined) the editoptions.value value. So one have to be able to set editoptions.value (or formatoptions.value or both) before the grid content will be created, so before the server response will be processed by jqGrid.

To be able to set the editoptions.value dynamically one can use setColProp method. If you loads the data from the server one can include all column property with exception name property in the server response. One can do this inside of beforeProcessing callback for example. The answer this one and this one describe the approach detailed. The answer shows how one can use common column name property ("c1", "c2", "c2") and uses jsonmap to read the relatively common named data. One can set jsonmap instead of name property if it's needed.

How to add dynamic dropdown values in jQgrid?

1 Answers1