Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Data Grid

    Cascading Lookups

    You can assign a lookup editor to a column. This editor displays a drop-down list populated with values from the specified data source. Users can filter the drop-down list to quickly locate required values.

    This demo shows how to implement cascading lookups:

    1. Configure the primary lookup
      A column's lookup is configured in the lookup object. Assign an array of items to the lookup's dataSource. Then specify the valueExpr and displayExpr properties if the data source contains objects. (See the StateID column.)

    2. Configure the secondary lookup
      The secondary lookup has a similar configuration, but its dataSource should be a function so that you can dynamically filter the lookup. (See step 3.)

    3. Connect the lookups
      To filter the secondary lookup's items based on the primary lookup's value, specify the filter property in the secondary lookup's dataSource. (See the CityID column).

    4. Reset the secondary lookup when the primary lookup's value is changed
      Use the setCellValue function as shown in the StateID column's configuration.

    5. Disable the secondary lookup until the primary lookup's value is set
      Use the onEditorPreparing handler for this.

    After you configure lookups, enable edit operations. Specify the required editing.mode and set the editing object's allowUpdating, allowAdding, and allowDeleting properties to true.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    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.5.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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/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/20.2.5/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 }];