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:
-
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 theStateIDcolumn.) -
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.) -
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 theCityIDcolumn). -
Reset the secondary lookup when the primary lookup's value is changed
Use the setCellValue function as shown in theStateIDcolumn's configuration. -
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div id="data-grid-demo">
<DxDataGrid
:data-source="employees"
:show-borders="true"
key-expr="ID"
@editorPreparing="onEditorPreparing"
>
<DxEditing
:allow-updating="true"
:allow-adding="true"
mode="row"
/>
<DxColumn
data-field="FirstName"
/>
<DxColumn
data-field="LastName"
/>
<DxColumn
data-field="Position"
/>
<DxColumn
:set-cell-value="setStateValue"
data-field="StateID"
caption="State"
>
<DxLookup
:data-source="states"
display-expr="Name"
value-expr="ID"
/>
</DxColumn>
<DxColumn
data-field="CityID"
caption="City"
>
<DxLookup
:data-source="getFilteredCities"
display-expr="Name"
value-expr="ID"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script>
import { DxDataGrid, DxColumn, DxEditing, DxLookup } from 'devextreme-vue/data-grid';
import service from './data.js';
const employees = service.getEmployees();
const states = service.getStates();
const cities = service.getCities();
export default {
components: {
DxDataGrid,
DxColumn,
DxEditing,
DxLookup
},
data() {
return {
employees,
states,
setStateValue(rowData, value) {
rowData.CityID = null;
this.defaultSetCellValue(rowData, value);
}
};
},
methods: {
getFilteredCities: (options) => {
return {
store: cities,
filter: options.data ? ['StateID', '=', options.data.StateID] : null
};
},
onEditorPreparing(e) {
if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
e.editorOptions.disabled = (typeof e.row.data.StateID !== 'number');
}
}
}
};
</script>
<style>
#data-grid-demo {
min-height: 700px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
</div>
</div>
</body>
</html>
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
}];
const states = [{
'ID': 1,
'Name': 'Alabama'
}, {
'ID': 2,
'Name': 'Alaska'
}, {
'ID': 3,
'Name': 'Arizona'
}, {
'ID': 4,
'Name': 'Arkansas'
}, {
'ID': 5,
'Name': 'California'
}];
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
}];
export default {
getEmployees() {
return employees;
},
getStates() {
return states;
},
getCities() {
return cities;
}
};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.27.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.1.4/cjs',
'devextreme-vue': 'npm:devextreme-vue@21.1.4',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.1.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.19/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.1.42/dist/dx-gantt.js',
'@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2',
'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'@devextreme/vdom': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@devextreme/*/package.json",
],
babelOptions: {
sourceMaps: false,
stage0: true
}
};
System.config(window.config);