DataGrid for DevExtreme - Update multiple cell values after selecting an item in a lookup column editor

This example demonstrates how to update multiple cell values after a user selects an item in the editor. In the example, when you select a new value in the "Name" column, the values in the "Address" and "Phone" columns also change.

Implementation Details

• Define onEditorPreparing to override the built-in onValueChanged event handler for a lookup column editor.
• Call the setValue method with the selectedItem option as a parameter to pass changes to the grid.
• Define the setCellValue callback function in a lookup column and use the newData parameter to update adjacent cells. The value parameter represents an item you have selected.

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • App.vue
• React
  • App.js
• ASP.NET
  • Index.cshtml

Documentation

• Getting Started with DataGrid
• DataGrid API - setCellValue

More Examples

• DataGrid for DevExtreme - Display tooltip for data cells
• DataGrid for DevExtreme - How to allow users select multiple cells