Example of undefined in React Spreadsheet Component


This sample explains the Data Validation feature with the gross pay calculation as an example. It is used to restrict the data that the user enters into a cell. To clear the applied validation, click the Data Validation button in the Data tab and Clear Validation option. You can also highlight the invalid data by selecting Highlight Invalid Data option.

More Details...


  • This feature allows you to apply validation to a cell or range of cells based on the conditions required. You can enable or disable data validation by using the allowDataValidation property.
  • In this sample, we have applied data validation for List, String, Number, Date and Time by using the addDataValidation method with ValidationModel as argument.
  • In the Employee Name column, we have used TextLength validation to provide proper name with more than 3 text length. In time in and time out column, we have provided Time validation for working hours between 8.00 AM to 6.00 PM. In the weekdays column, we have used List validation for weekdays (Monday to Friday).
  • In the hours worked column, we have used WholeNumber validation to find out overtime calculation(i.e more than 8 hours). And also, we used the addInvalidHighlight to highlight the overtime hours of the employee.
  • In the gross pay with overtime column, we have used WholeNumber validation. In this validation, we have used the input value as the cell reference. It helps in changing the criteria dynamically.

More information about the Data Validation can be found in this documentation section.