DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React 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.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

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.