Quick Summary:
- Associate validators and editor providers to WebDataGrid cells using Cell Editing’s Column Settings
- Customize the look and feel of validation messages by applying a CSS class to the validator
- Wire up custom validators by finding editor provider IDs in the generated HTML
Introduction
One of the strengths of the WebDataGrid is giving the user the ability to edit data in the grid directly in the table cell. This article will take you through the steps required to associate a validators to the grid. The validation controls used in this sample will demonstrate how to use stock controls like the RequiredFieldValidator as well as a CustomValidator.
The WebDataGrid wires up validation with the definition of a column setting. Column settings associate an editor provider and a validation control to a column. When these two components are linked together in a column then validation is enabled.
Be sure to watch the WebDataGrid Validation video and download the sample code.
Adding Editor Providers
The first step to providing validation to the grid is to place some editor providers on in the grid. Once you have a ScriptManager and the WebDataGrid on the page, open the smart tag in the designer and select Edit Grid Editor Providers.
When the Editor Provider dialog opens you’ll have an opportunity to define an editor provider. When you click the “+” button you can select from a list of editors. For the sample implemented in this article, the first name is being validated as being required and the LastLoginDate is must be a date earlier than today. Therefore a TextEditorProvider is added for the first name field and the DateTimeEditorProvider is included for the LastLoginDate field.
Validators
Next you must add the validators to the page. The following listing demonstrates how to customize the markup for a required field validator as well as a custom validator.
These validation controls will behave slightly differently than what you may be used to under other circumstances. Looking first at the code for the RequiredFieldValidator, notice that the ControlToValidate property is set equal to the ID for the WebDataGrid. Usually you would set the ControlToValidate to the ID of a concrete input control. The WebDataGrid will intercept the call for the validator to attach to an input control and will route the validation messages from the selected cell’s input control to the validation control.
Another difference is that you may be used to adding a marker like an asterisk in the Text property of the validator choosing to allow the ValidationSummary control to display the ErrorMessage value to the user. Since the validation messages are displayed next to the input controls a ValidationSummary control is unnecessary and the value of the Text property is the member used to display information to the user.
The last anomaly (which is completely un-related to the use of the WebDataGrid) is the need to blank out the validator’s ForeColor property. The ASP.NET validation controls have a hard-coded value for their ForeColor property which is an unsightly bright red. Having an explicit value in this property will force the control to generate an in-line style thereby overwriting any styles applied higher up in the CSS hierarchy. Blanking this value out will allow the error class to appropriately style the control.
Behaviors
Now that the page has validators and the grid has editor providers defined, the next step is to add the editing behaviors to orchestrate the CRUD operations and handle the client-side validation.
Return to the smart tag and open the Behaviors Editor.
You must enable and customize a number of behaviors on the grid:
- Activation: The activation behavior is required in order to fire the client events required for the validation listeners
- Editing Core: The core is required when you use any of the editing behaviors
- Cell Editing: Cell editing is the behavior that will allow you to customize the ColumnSettings to associate the editors with the validators (see below)
- EnableOnKeyPress: Enabling this mode action will allow the control to switch to edit mode when the user starts typing (not required, but nice)
Next click on the (Collection) next to ColumnSettings, which opens the ColumnSettings editor:
A column setting definition is required for any column that needs validation enforced. When you click on the Add Item button you can associate the editor provider to a validator by the column key. Making these associations will properly define the validators needed for each column.
Custom Validator
Working with a custom validator is possible, but requires some extra steps which are detailed below. The CustomValidator control requires that you provide the function name defined on the client that encapsulates the custom validation logic for the control. The following listing is the script used in this instance:
This validation function locates the instance of the WebDateTimeEditor on the page, extracts it’s value and compares it with the current date. What you must be aware of about this code is that the only way to get the value for the ID of “wdg_ct101” is to view source on the page and find what ID is being generated for that control.
When you view source on the page and scroll to the bottom of the page, you will find a script block that defines the Infragistics controls on the page. Since the validation script on this page is concerned with the WebDateTimeEditor’s value you simply need to look for the definition of the WebDateTimeEdior and find it’s ID value.
Note: This approach is a very brittle method to use for finding and accessing controls on the page. If you add new editor providers, or perhaps any other controls to the page, there is a chance that the ID could change. If you choose to use this method make sure you test your code as the project evolves!
Server Validation
A question people often ask is whether or not the WebDataGrid validators are run on the client as well as the server. In the grid’s current state the validation rules are only run on the client.
Resources