• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET WebDataGrid Validation
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

WebDataGrid Validation

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:

  1. Activation: The activation behavior is required in order to fire the client events required for the validation listeners
  2. Editing Core: The core is required when you use any of the editing behaviors
  3. Cell Editing: Cell editing is the behavior that will allow you to customize the ColumnSettings to associate the editors with the validators (see below)
  4. 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

  • Watch the video
  • Download the sample code
  • CRUD
  • WebDataGrid
  • Share
  • History
  • More
  • Cancel
Related
Recommended