DataGrid for DevExtreme - How to handle different value types with editCellTemplate for the same column

This example describes a typical usage scenario where users want to have a dynamic column. For instance a column must handle strings/numbers/dates etc.

DataGrid's column data type is specified in the dataType property. If this property is not set it is auto-predicted based on the first row. So, this causes an issue for most customers where their input data changes to a different data type (e.g., input is a string, but it gets cast to a date/number).

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
  • dynamic-edit-component.component.html
  • dynamic-edit-component.component.ts
• Vue
  • DynamicDataGrid.vue
  • DynamicEditComponent.vue
• React
  • App.tsx
  • DynamicEditCellComponent.tsx
  • CellComponent.tsx

Implementation Details

Set your dynamic column's dataType property to "object". Then, store the data type in a data field, specify editCellTemplate and check the data.Type field's value to render the related editor. Finally, use the setCellValue callback of the Type column to update your dynamic column and rerender editCellTemplate.

Documentation

• DataGrid.columns.editCellTemplate
• DataGrid.columns.cellTemplate
• DataGrid.columns.setCellValue