artem-kurchenko / datagrid-how-to-hide-disable-edit-form-items-based-on-another-item-s-value

DevExtreme DataGrid, Angular, TypeScript, Vue, React, ASP.NET Core

DataGrid for DevExtreme - How to show/hide or enable/disable Edit Form items based on another item's value

This example demonstrates how to implement the following scenarios in DataGrid:

• Hide the Home Address form item if the AddressRequired value is false.
• Disable the LastName item editor if the FirstName form item value is empty.

Implementation Details

• Define the setCellValue callback function for the "AddressRequired" and "FirstName" columns to re-render items after an editor value is changed.

• Handle the customizeItem form event.

• In the event handler, call the getRowIndexByKey and cellValue methods to obtain current editor values. Assign the value obtained from the cellValue method to the item's visible property.

• In the onEditorPreparing function, change the disabled option of the required form item editor.

Files to Review

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

Documentation

• Getting Started with DataGrid
• DataGrid - API Reference
• Form - API Reference

More Examples

• DataGrid - How to implement a custom editing form using dxForm and dxPopup