var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.dataGridOptions = {
keyExpr: "ID",
dataSource: employees,
showBorders: true,
editing: {
allowUpdating: true,
allowAdding: true,
mode: "row"
},
onEditorPreparing: function(e) {
if(e.parentType === "dataRow" && e.dataField === "CityID") {
e.editorOptions.disabled = (typeof e.row.data.StateID !== "number");
}
},
columns: ["FirstName", "LastName", "Position",
{
dataField: "StateID",
caption: "State",
setCellValue: function(rowData, value) {
rowData.StateID = value;
rowData.CityID = null;
},
lookup: {
dataSource: states,
valueExpr: "ID",
displayExpr: "Name"
}
},
{
dataField: "CityID",
caption: "City",
lookup: {
dataSource: function (options) {
return {
store: cities,
filter: options.data ? ["StateID", "=", options.data.StateID] : null
};
},
valueExpr: "ID",
displayExpr: "Name"
}
}
]
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<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=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="data-grid-demo">
<div id="gridContainer" dx-data-grid="dataGridOptions"></div>
</div>
</div>
</body>
</html>
var 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
}];
var states = [{
"ID": 1,
"Name": "Alabama"
}, {
"ID": 2,
"Name": "Alaska"
}, {
"ID": 3,
"Name": "Arizona"
}, {
"ID": 4,
"Name": "Arkansas"
}, {
"ID": 5,
"Name": "California"
}];
var 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
}];