Grid Validation

This sample shows how you can add validation to a FlexGrid, so that it displays errors in rows and cells. This will prevent users from leaving edit mode until they provide valid values for the cells.

The validation logic is implemented by setting the getError property of the CollectionView, being used as a data source, to a callback method. This method takes an item and a property name as parameters, and returns an error message if the current property value is invalid.

Grid Validation Properties

The showErrors property determines whether the grid should add the wj-state-invalid class to cells that contain errors:

The validateEdits property determines whether the grid should keep cells in edit mode while there are validation errors:

Additional Custom Validation

In addition to the built-in validation, you can implement your own custom behaviors using code.

For example, if you check the box below the grid will handle the cellEditEnded event to check whether there are any validation errors in the row that was just edited. If any errors are detected, the grid will select the invalid cell and get back into edit mode: