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"} }

    ],

Answer 1

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.