Data Validation Techniques in ASP.NET Core FlexGrid
FlexGrid is a feature-rich DataGrid control that provides built-in Filtering, Grouping, Sorting, Editing & an extensible API for implementing customizations, among other capabilities. These features set make it one of the best DataGrid controls out there. FlexGrid’s rich features are available across cross-platform, including Winforms, WPF, ASP.NET MVC, Javascript, Blazor, and Xamarin.
For this blog, we are going to focus on the C1 ASP. Net Core FlexGrid & various validation techniques that can be applied for both Client & Server. Let us explore a use case for a Web-based Online Inventory System used by a Home Décor Business to manage its Inventory using FlexGrid.
Let’s take an example of an Inventory Manager. They are required to update the inventory records at the end of the week based on sales, returns, or any price changes for an Item. There could be field-level validations that must be remembered when updating each record, like ensuring that Descriptions should not be empty or that price should be between a certain range. Ensuring these validations adhere to every time would not be easy. However, using FlexGrid, there is an effortless way to ensure that these validations are adhered to and provide helpful messages for the user to understand the reason for these errors.
Here is an example of validations that we will apply using FlexGrid:
ComponentOne FlexGrid allows the following Data Validation techniques to validate the data:
- Unobtrusive Validation
- CollectionView’s getError method
- FlexGrid’s itemValidator method
- FlexGrid’s cellEditEnding event
Unobtrusive Validation
Unobtrusive Validation can be used to apply the already-existing validation attributes from the Model class and re-use them in the client-side to validate the data by defining the rules for the Model class without defining the rules at the client-side.
For this, the following files should be included:
After adding the required files, the validation rules can be added with the help of attributes Required and Range. These attributes are mandatory to add the rules for Unobtrusive Validation.
Model class with Validation Rules:
The required files are included in the project and the rules are defined for the Model class. After this, the Model is ready for databinding with FlexGrid.
Since this is a built-in validation, it adds the data- attribute to the editing cell Input, and the error message is shown using the Title attribute. Hence the error messages displayed cannot be customized.
Note: While working with the Unobtrusive validation, the cellEditEnding event’s cancel property is set to true if the input value is not valid. By checking if the cancel is true, the cell can be preserved in edit mode by setting the stayInEditMode property to true for CellEditEndingEventArgs.
If looking for the online demo, here is the Unobtrusive Validation demo.
CollectionView’s getError method
CollectionView’s getError method is used to validate the FlexGrid at the client-side using the CollectionView. It highlights the cells and RowHeaders if there is an error in the row’s data item. It accepts a callback function that accepts the three parameters, returns the error message based on the condition, and returns the null if there is no error. The getError method iterates for each data item and its properties and validates the value based on defined conditions.
By setting the FlexGrid's showErrors to true, the erroneous cells can be highlighted with a red border, and by setting the validateEdits to true, the cell cannot be exited from edit mode until the value is incorrect
Here is the implementation for the FlexGrid with CollectionView validation.
Note: This method can work only when the FlexGrid is inbound mode.
If looking for the online demo, here is the CollectionView's getError demo.
FlexGrid’s itemValidator method
The ItemValidator method also accepts a callback, but it iterates through each cell and validates the cell value. It works for both bound and unbound FlexGrid. It accepts a row and column index, and the data can be fetched using the getCellData() method. Based on the column index, the binding of the column is based on the row index. The data item can be fetched to apply validation on FlexGrid.
FlexGrid’s cellEditEnding event
Validation can also be dependent on another field of the dataItem or FlexGrid cells. In this case, the cellEditEnding event would be useful, as it provides the new and old values. The other values can also be fetched using the getCellData() method.
For example: The Stocks have InStock property, and it depends on the Quantity. If the Quantity is 0, the InStock cannot be true and vice versa. In this case, the cellEditEnding event would be handled to stay in edit mode if the input value is not valid and add the error class and show the Tooltip.
Follow along and download the demo sample.
Download ComponentOne and view ComponentOne Asp.Net Core MVC Documentation.