Using jqGrid, Is there anyway to have dynamic dropdown in the edit record popup?

Question

I have a record that has three fields and they are all dropdowns. It all works fine if they are independent records but i would like it where if you change the first dropdown, then the list of items in the second dropdown changes? Is this possible in jqgrid.

Simplified version of my code looks like this now:

jQuery("#marketDataGrid").jqGrid({
    mtype: "POST",
    url: "/Application/MarketData/" + id,
    datatype: "json",
    colNames: ["", "Id","Source", "API"],
    colModel: [
        { name: "ApplicationId", index: "ApplicationId", hidden: true, width: 0, editable: true, editoptions: { readonly: true} },
        { name: "Id", index: "Id", hidden: false, width: 30, editable: false, editoptions: { readonly: true} },
        { name: "MarketDataSource", index: "MarketDataSource", editoptions: { dataUrl: "/MarketDataSource/GetSelectDataRequired" }, editrules: { required: true }, editable: true, edittype: "select", width: 155, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: "/MarketDataSource/GetSelectData"} },
        { name: "API", index: "API", editoptions: { dataUrl: "/API/GetSelectDataRequired" }, editrules: { required: true }, editable: true, edittype: "select", width: 155, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: "/API/GetSelectData"} }

    ],

I suppose you want something like this http://www.ok-soft-gmbh.com/jqGrid/DependendSelects1.htm ? — Piyush Sardana, Aug 27 '12 at 17:38
double click on country column of any row, change the value, states value get changed — Piyush Sardana, Aug 27 '12 at 17:39
@PiyushSardana - thanks . . i am trying to do this not inline in the grid but rather on the popup edit form. Is a similar thing possible? — leora, Aug 27 '12 at 18:39

score 2 · Accepted Answer · edited May 23 '17 at 12:22

There are no simple way to implement dependent selects in jqGrid. Nevertheless I shown in the demo from the answer how dependent selects could be implemented. I demonstrated the implementation in tree cases: inline editing, form editing and searching toolbar.

In your case you use dataUrl of editoptions instead of value used in the referenced demo. Nevertheless the implementation can be based on the same idea. You can register change event for the "main" select and make $.ajax request to the server to get the subset of select's options of the dependent select. Inside of success handle of $.ajax you will be able to do the same thing like in my demo.

Using jqGrid, Is there anyway to have dynamic dropdown in the edit record popup?

1 Answers1

Linked