Validate User-Entered Data before Committing it to a Cell in React
You may have requirements to prevent users from entering certain data into a cell (for example, preventing users from entering data values lower than zero). By using cellEditEnding, you can validate the data before committing it to a cell on the grid.
Steps to Complete:
1. Bind the cellEditEnding event to a method
2. Check to see if the data meets your requirements
Bind the cellEditEnding event to a method
First, we must set up the FlexGrid by initializing it with data, and then bind a method to the cellEditEnding event of the grid.
Check to see if the data meets your requirements
Next, we check to see if the user-entered data matches the criteria to be saved in the cell. In this sample, we'll check to see if the numeric value entered is less than 0. If it is less, then we discard it; if not, we won't need to do anything and the grid will take care of updating itself with the new data.
You can find a live sample of this project here: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexgrid-data-validation