/DataGrid-How-to-hide-disable-Edit-Form-items-based-on-another-item-s-value

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

Primary LanguageJavaScriptOtherNOASSERTION

DevExtreme DataGrid - 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.

form-items

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 Look At

Documentation

More Examples