Devextreme Cascaded lookup

Question

I need to develop grid with cascaded lookup using jquery. I am referencing below link: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CascadingLookups/jQuery/Light/

But I have little requirement changes, as i am storing state and city name instead of there ids in employee table.

What changes needs to be done in code ?

below is my sample data

var employees = [{
    "ID": 1,
    "FirstName": "John",
    "LastName": "Heart",
    "Prefix": "Mr.",
    "Position": "CTO",
    "State": Alabama,
    "City": Tuscaloosa
}



var states = [{
    "ID": 1,
    "Name": "Alabama"
}, {
    "ID": 2,
    "Name": "Alaska"
}
]


var cities = [{
    "ID": 1,
    "Name": "Tuscaloosa",
    "StateID": 1
}, {
    "ID": 2,
    "Name": "Hoover",
    "StateID": 1
}]

Answer 1

To accomplish the task you can change states and cities structure and dataField/valueExpr/displayExpr options. See the following example:

$(function() {
    $("#gridContainer").dxDataGrid({
        keyExpr: "ID",
        dataSource:  employees,
        editing: {
            allowUpdating: true,
            allowAdding: true,
            mode: "row"
        },
        onEditorPreparing: function(e) {
            if(e.parentType === "dataRow" && e.dataField === "City") {
                e.editorOptions.disabled = !e.row.data.State;
            }
        },
        columns: ["FirstName", "LastName", "Position",
            {
                dataField: "State",
                setCellValue: function(rowData, value) {
                    rowData.State = value;
                    rowData.City = null;
                },
                lookup: {
                    dataSource: states,
                    valueExpr: "this",
                    displayExpr: "this"
                }
            },
            {
                dataField: "City",
                lookup: {
                    dataSource: function(options) {
                        return {
                            store: cities,
                            filter: options.data ? ["State", "=", options.data.State] : null
                        };
                    },
                    valueExpr: "Name",
                    displayExpr: "Name"
                }
            }
        ]
    });
});

var employees = [{
    "ID": 1,
    "FirstName": "John",
    "LastName": "Heart",
    "Prefix": "Mr.",
    "Position": "CTO",
    "State": "California",
    "City": "Glendale"
}, {
    "ID": 2,
    "FirstName": "Robert",
    "LastName": "Reagan",
    "Prefix": "Mr.",
    "Position": "IT Manager",
    "State": "Arkansas",
    "City": "Jacksonville"
}];

var states = ["Arkansas", "California"];

var cities = [{
    "Name": "Jacksonville",
    "State": "Arkansas"
}, {
    "Name": "Cabot",
    "State": "Arkansas"
}, {
    "Name": "Glendale",
    "State": "California"
}, {
    "Name": "Ontario",
    "State": "California"
}];

<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/17.2.4/js/dx.all.js"></script>

<div id="gridContainer"></div>