React Data Grid - Cascading Lookups

import React from 'react'; import DataGrid, { Column, Editing, Lookup } from 'devextreme-react/data-grid'; import { employees, states, cities } from './data.js'; const onEditorPreparing = (e) => { if (e.parentType === 'dataRow' && e.dataField === 'CityID') { e.editorOptions.disabled = e.row?.data.StateID === undefined; } }; const getFilteredCities = (options) => ({ store: cities, filter: options.data ? ['StateID', '=', options.data.StateID] : null, }); function setStateValue(rowData, value) { rowData.CityID = null; this.defaultSetCellValue?.(rowData, value, undefined); } const App = () => ( <div id="data-grid-demo"> <DataGrid dataSource={employees} keyExpr="ID" showBorders={true} onEditorPreparing={onEditorPreparing} > <Editing mode="row" allowUpdating={true} allowAdding={true} ></Editing> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="Position" /> <Column dataField="StateID" caption="State" setCellValue={setStateValue} > <Lookup dataSource={states} displayExpr="Name" valueExpr="ID" /> </Column> <Column dataField="CityID" caption="City" > <Lookup dataSource={getFilteredCities} displayExpr="Name" valueExpr="ID" /> </Column> </DataGrid> </div> ); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export interface Employee { ID: number; FirstName: string; LastName: string; Prefix: string; Position: string; StateID: number | null; CityID: number | null; } export const employees: Employee[] = [{ ID: 1, FirstName: 'John', LastName: 'Heart', Prefix: 'Mr.', Position: 'CTO', StateID: 5, CityID: 17, }, { ID: 2, FirstName: 'Olivia', LastName: 'Peyton', Prefix: 'Mrs.', Position: 'HR Manager', StateID: 5, CityID: 17, }, { ID: 3, FirstName: 'Robert', LastName: 'Reagan', Prefix: 'Mr.', Position: 'IT Manager', StateID: 4, CityID: 14, }, { ID: 4, FirstName: 'Greta', LastName: 'Sims', Prefix: 'Ms.', Position: 'Shipping Manager', StateID: 3, CityID: 8, }, { ID: 5, FirstName: 'Brett', LastName: 'Wade', Prefix: 'Mr.', Position: 'Shipping Manager', StateID: 3, CityID: 9, }, { ID: 6, FirstName: 'Sandra', LastName: 'Johnson', Prefix: 'Mrs.', Position: 'Network Admin', StateID: 2, CityID: 6, }, { ID: 7, FirstName: 'Kevin', LastName: 'Carter', Prefix: 'Mr.', Position: 'Network Admin', StateID: 1, CityID: 3, }, { ID: 8, FirstName: 'Cynthia', LastName: 'Stanwick', Prefix: 'Ms.', Position: 'Sales Assistant', StateID: 1, CityID: 3, }, { ID: 9, FirstName: 'Kent', LastName: 'Samuelson', Prefix: 'Dr.', Position: 'Sales Assistant', StateID: 1, CityID: 2, }, { ID: 10, FirstName: 'Taylor', LastName: 'Riley', Prefix: 'Mr.', Position: 'Support Assistant', StateID: 5, CityID: 17, }, { ID: 11, FirstName: 'Sam', LastName: 'Hill', Prefix: 'Mr.', Position: 'Sales Assistant', StateID: 2, CityID: 5, }, { ID: 12, FirstName: 'Kelly', LastName: 'Rodriguez', Prefix: 'Ms.', Position: 'Sales Assistant', StateID: 5, CityID: 17, }, { ID: 13, FirstName: 'Natalie', LastName: 'Maguirre', Prefix: 'Mrs.', Position: 'Sales Assistant', StateID: 4, CityID: 14, }, { ID: 14, FirstName: 'Walter', LastName: 'Hobbs', Prefix: 'Mr.', Position: 'Support Assistant', StateID: 2, CityID: 5, }]; export const states = [{ ID: 1, Name: 'Alabama', }, { ID: 2, Name: 'Alaska', }, { ID: 3, Name: 'Arizona', }, { ID: 4, Name: 'Arkansas', }, { ID: 5, Name: 'California', }]; export const cities = [{ ID: 1, Name: 'Tuscaloosa', StateID: 1, }, { ID: 2, Name: 'Hoover', StateID: 1, }, { ID: 3, Name: 'Dothan', StateID: 1, }, { ID: 4, Name: 'Decatur', StateID: 1, }, { ID: 5, Name: 'Anchorage', StateID: 2, }, { ID: 6, Name: 'Fairbanks', StateID: 2, }, { ID: 7, Name: 'Juneau', StateID: 2, }, { ID: 8, Name: 'Avondale', StateID: 3, }, { ID: 9, Name: 'Buckeye', StateID: 3, }, { ID: 10, Name: 'Carefree', StateID: 3, }, { ID: 11, Name: 'Springdale', StateID: 4, }, { ID: 12, Name: 'Rogers', StateID: 4, }, { ID: 13, Name: 'Sherwood', StateID: 4, }, { ID: 14, Name: 'Jacksonville', StateID: 4, }, { ID: 15, Name: 'Cabot', StateID: 4, }, { ID: 16, Name: 'Adelanto', StateID: 5, }, { ID: 17, Name: 'Glendale', StateID: 5, }, { ID: 18, Name: 'Moorpark', StateID: 5, }, { ID: 19, Name: 'Needles', StateID: 5, }, { ID: 20, Name: 'Ontario', StateID: 5, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const employees = [ { ID: 1, FirstName: 'John', LastName: 'Heart', Prefix: 'Mr.', Position: 'CTO', StateID: 5, CityID: 17, }, { ID: 2, FirstName: 'Olivia', LastName: 'Peyton', Prefix: 'Mrs.', Position: 'HR Manager', StateID: 5, CityID: 17, }, { ID: 3, FirstName: 'Robert', LastName: 'Reagan', Prefix: 'Mr.', Position: 'IT Manager', StateID: 4, CityID: 14, }, { ID: 4, FirstName: 'Greta', LastName: 'Sims', Prefix: 'Ms.', Position: 'Shipping Manager', StateID: 3, CityID: 8, }, { ID: 5, FirstName: 'Brett', LastName: 'Wade', Prefix: 'Mr.', Position: 'Shipping Manager', StateID: 3, CityID: 9, }, { ID: 6, FirstName: 'Sandra', LastName: 'Johnson', Prefix: 'Mrs.', Position: 'Network Admin', StateID: 2, CityID: 6, }, { ID: 7, FirstName: 'Kevin', LastName: 'Carter', Prefix: 'Mr.', Position: 'Network Admin', StateID: 1, CityID: 3, }, { ID: 8, FirstName: 'Cynthia', LastName: 'Stanwick', Prefix: 'Ms.', Position: 'Sales Assistant', StateID: 1, CityID: 3, }, { ID: 9, FirstName: 'Kent', LastName: 'Samuelson', Prefix: 'Dr.', Position: 'Sales Assistant', StateID: 1, CityID: 2, }, { ID: 10, FirstName: 'Taylor', LastName: 'Riley', Prefix: 'Mr.', Position: 'Support Assistant', StateID: 5, CityID: 17, }, { ID: 11, FirstName: 'Sam', LastName: 'Hill', Prefix: 'Mr.', Position: 'Sales Assistant', StateID: 2, CityID: 5, }, { ID: 12, FirstName: 'Kelly', LastName: 'Rodriguez', Prefix: 'Ms.', Position: 'Sales Assistant', StateID: 5, CityID: 17, }, { ID: 13, FirstName: 'Natalie', LastName: 'Maguirre', Prefix: 'Mrs.', Position: 'Sales Assistant', StateID: 4, CityID: 14, }, { ID: 14, FirstName: 'Walter', LastName: 'Hobbs', Prefix: 'Mr.', Position: 'Support Assistant', StateID: 2, CityID: 5, }, ]; export const states = [ { ID: 1, Name: 'Alabama', }, { ID: 2, Name: 'Alaska', }, { ID: 3, Name: 'Arizona', }, { ID: 4, Name: 'Arkansas', }, { ID: 5, Name: 'California', }, ]; export const cities = [ { ID: 1, Name: 'Tuscaloosa', StateID: 1, }, { ID: 2, Name: 'Hoover', StateID: 1, }, { ID: 3, Name: 'Dothan', StateID: 1, }, { ID: 4, Name: 'Decatur', StateID: 1, }, { ID: 5, Name: 'Anchorage', StateID: 2, }, { ID: 6, Name: 'Fairbanks', StateID: 2, }, { ID: 7, Name: 'Juneau', StateID: 2, }, { ID: 8, Name: 'Avondale', StateID: 3, }, { ID: 9, Name: 'Buckeye', StateID: 3, }, { ID: 10, Name: 'Carefree', StateID: 3, }, { ID: 11, Name: 'Springdale', StateID: 4, }, { ID: 12, Name: 'Rogers', StateID: 4, }, { ID: 13, Name: 'Sherwood', StateID: 4, }, { ID: 14, Name: 'Jacksonville', StateID: 4, }, { ID: 15, Name: 'Cabot', StateID: 4, }, { ID: 16, Name: 'Adelanto', StateID: 5, }, { ID: 17, Name: 'Glendale', StateID: 5, }, { ID: 18, Name: 'Moorpark', StateID: 5, }, { ID: 19, Name: 'Needles', StateID: 5, }, { ID: 20, Name: 'Ontario', StateID: 5, }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#data-grid-demo { min-height: 700px; }