React Hierarchical Grid Editing and Validation
The React IgrHierarchicalGrid provides editing that has a built-in Validation mechanism of user input when editing cells/rows. It extends the form validation functionality to allow easier integration with a well known functionality. When the state of the editor changes, visual indicators are applied to the edited cell in the IgrHierarchicalGrid.
Configuration
Configure via Template-Driven Configuration
We extend some of the React Forms validator to directly work with the IgrColumn. The same validators are available as attributes to be set declaratively in IgrColumn. The following validators are supported out-of-the-box:
- Required
- Min
- Max
- MinLength
- MaxLength
- Pattern
To validate that a column input would be set and the value is going to be formatted as an email, you can use the related directives:
Validation Service API
The grid exposes a validation service via the IgrIgrHierarchicalGrid.validation property.
That service has the following public APIs:
Valid- returns if the grid validation state is valid.GetInvalid- returns records with invalid states.Clear- clears state for record by id or clears all state if no id is provided.IgrIgrHierarchicalGrid.markAsTouched- marks the related record/field as touched.
Invalid states will persis until the validation errors in them are fixed according to the validation rule or they are cleared.
Validation Triggers
Validation will be triggered in the following scenarios:
- While editing via the cell editor based on the grid’s
GridValidationTrigger. Either onChangewhile typing in the editor, or onBlurwhen the editor loses focus or closes. - When updating cells/rows via the API -
IgrHierarchicalGrid.updateRow,IgrHierarchicalGrid.updateCell, etc. - When using batch editing and the
Undo/RedoAPI of the transaction service.
Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the IgrIgrHierarchicalGrid.markAsTouched API of the validation service.
API References
Additional Resources
Our community is active and always welcoming to new ideas.