React Grid Editing and Validation

The React IgrGrid 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 IgrGrid.

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
• Email
• 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 IgrIgrGrid.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.
• IgrIgrGrid.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 on Change while typing in the editor, or on Blur when the editor loses focus or closes.
• When updating cells/rows via the API - IgrGrid.updateRow, IgrGrid.updateCell, etc.
• When using batch editing and the Undo/Redo API of the transaction service.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub