Unobtrusive Validation

Unobtrusive validation support for FlexGrid helps you to validate the data that you enter in the FlexGrid at client side. Unobtrusive Validation can implement simple client-side validation without writing a bulk of validation code, and improves the user experience simply by adding the right attributes and including the script files.

In a common validation scenario, when we use a validation to validate any control and use client side validation, JavaScript code is generated and rendered as HTML on the web browser. However, with unobtrusive validation inline javascript is not generated for rendering to handle client side validation. Instead, it uses HTML5 data-* attributes for client side validations. Unobtrusive validation support is jQuery dependent.

Before implementing the below steps, you need to create a new MVC application using ComponentOne template or Visual Studio template.

This topic comprises of four steps:

Step 1: Configure your MVC application
Step 2: Create Validations and Datasource for FlexGrid
Step 3: Add a FlexGrid control
Step 4: Build and Run the Project

Complete the following steps to add the js file references to your application.

From the Solution Explorer, open the folders Views | Shared.
Double click _Layout.cshtml to open it.
Add the following code between the <head></head> tags.

Razor	Copy Code
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

In case of tag helpers, references to the script files are automatically added to your application.

Step 2: Create Validations and Datasource for FlexGrid

Model - UserInfo.cs (Includes Validations)

Razor	Copy Code
using System.ComponentModel.DataAnnotations; namespace UnobtrusiveValidation.Models { public class UserInfo { [Required] [RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessage = "The username must be alphanumeric and contains 4 to 10 characters.")] public string Name { get; set; } [Required] [EmailAddress] public string Email { get; set; } [Required] [MinLength(6)] [MaxLength(16)] public string Phone { get; set; } [Required] public string Country { get; set; } [Required] public string Industry { get; set; } [Required] public DateTime Birthdate { get; set; } } }

Razor

Copy Code

using System.ComponentModel.DataAnnotations;
namespace UnobtrusiveValidation.Models
{
     public class UserInfo
    {
        [Required]
        [RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessage = "The username must be alphanumeric and contains 4 to 10 characters.")]
        public string Name { get; set; }
        [Required]
        [EmailAddress]
        public string Email { get; set; }
        [Required]
        [MinLength(6)]
        [MaxLength(16)]
        public string Phone { get; set; }
        [Required]
        public string Country { get; set; }
        [Required]
        public string Industry { get; set; }
        [Required]
        public DateTime Birthdate { get; set; }
    }
}

Model - UserData.cs (Includes Data)

Razor	Copy Code
public class UserData { public static List<UserInfo> Users { get { return new List<UserInfo>() { new UserInfo(){ Name="John", Email="John@gmail.com", Phone="1424685445", Country="Albania", Industry="Computers", Birthdate= DateTime.Parse("2001/1/1")}, new UserInfo(){ Name="Mary", Email="Mary@gmail.com", Phone="1296479754", Country="American", Industry="Electronics", Birthdate= DateTime.Parse("1985/3/2")}, new UserInfo(){ Name="David", Email="David@gmail.com", Phone="1217654653", Country="Australia", Industry="Telecom", Birthdate= DateTime.Parse("1999/3/1")}, new UserInfo(){ Name="Sunny", Email="Sunny@gmail.com", Phone="1756456786", Country="Bosnia", Industry="Internet", Birthdate= DateTime.Parse("1989/4/3")}, new UserInfo(){ Name="James", Email="James@gmail.com", Phone="1209687543", Country="Botswana", Industry="Accounting", Birthdate= DateTime.Parse("1994/3/2")}, new UserInfo(){ Name="Maria", Email="Maria@gmail.com", Phone="1543578643", Country="Bahrain", Industry="Accounting", Birthdate= DateTime.Parse("1998/4/2")}, new UserInfo(){ Name="Michael", Email="Michael@gmail.com", Phone="1215457467", Country="Argentina", Industry="Finance", Birthdate= DateTime.Parse("2003/2/2")}, new UserInfo(){ Name="Michelle", Email="Michelle@gmail.com", Phone="1534357546", Country="Bulgaria", Industry="Finance", Birthdate= DateTime.Parse("2001/1/1")} }; } } }

Razor

Copy Code

public class UserData
    {
        public static List<UserInfo> Users
        {
            get
            {
                return new List<UserInfo>()
                {
                    new UserInfo(){ Name="John", Email="John@gmail.com", Phone="1424685445", Country="Albania", Industry="Computers", Birthdate= DateTime.Parse("2001/1/1")},
                    new UserInfo(){ Name="Mary", Email="Mary@gmail.com", Phone="1296479754", Country="American", Industry="Electronics", Birthdate= DateTime.Parse("1985/3/2")},
                    new UserInfo(){ Name="David", Email="David@gmail.com", Phone="1217654653", Country="Australia", Industry="Telecom", Birthdate= DateTime.Parse("1999/3/1")},
                    new UserInfo(){ Name="Sunny", Email="Sunny@gmail.com", Phone="1756456786", Country="Bosnia", Industry="Internet", Birthdate= DateTime.Parse("1989/4/3")},
                    new UserInfo(){ Name="James", Email="James@gmail.com", Phone="1209687543", Country="Botswana", Industry="Accounting", Birthdate= DateTime.Parse("1994/3/2")},
                    new UserInfo(){ Name="Maria", Email="Maria@gmail.com", Phone="1543578643", Country="Bahrain", Industry="Accounting", Birthdate= DateTime.Parse("1998/4/2")},
                    new UserInfo(){ Name="Michael", Email="Michael@gmail.com", Phone="1215457467", Country="Argentina", Industry="Finance", Birthdate= DateTime.Parse("2003/2/2")},
                    new UserInfo(){ Name="Michelle", Email="Michelle@gmail.com", Phone="1534357546", Country="Bulgaria", Industry="Finance", Birthdate= DateTime.Parse("2001/1/1")}
                };
            }
        }
    }

Step 3: Add a FlexGrid control

UnobtrusiveValidationController.cs

Razor	Copy Code
public class IndexController : Controller { private static List<UserInfo> users = UserData.Users; public IActionResult Index() { return View(users); } }

View - Index.cshtml

HTML Helpers
Tag Helpers

Razor	Copy Code
@using FlexGridValidationsHTMLHelpers.Models; @model List<UserInfo> @(Html.C1().FlexGrid<UserInfo>() .Id("flexGrid") .AutoGenerateColumns(false) .Columns(columns => columns .Add(c => c.Binding("Name")) .Add(c => c.Binding("Email")) .Add(c => c.Binding("Phone")) .Add(c => c.Binding("Country")) .Add(c => c.Binding("Industry")) .Add(c => c.Binding("Birthdate")) ) .Bind(ib => ib.Bind(Model)) .AllowAddNew(true) .AllowDelete(true) .CssStyle("height", "400px") )

Razor

Copy Code

@using FlexGridValidationsHTMLHelpers.Models;
@model List<UserInfo>

@(Html.C1().FlexGrid<UserInfo>()
    .Id("flexGrid")
    .AutoGenerateColumns(false)
    .Columns(columns => columns
        .Add(c => c.Binding("Name"))
        .Add(c => c.Binding("Email"))
        .Add(c => c.Binding("Phone"))
        .Add(c => c.Binding("Country"))
        .Add(c => c.Binding("Industry"))
        .Add(c => c.Binding("Birthdate"))
    )
    .Bind(ib => ib.Bind(Model))
    .AllowAddNew(true)
    .AllowDelete(true)
    .CssStyle("height", "400px")
)

Razor	Copy Code
@using ValidationFlexGrid.Models @model List<UserInfo> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } <br /> <c1-flex-grid id="flexGrid" auto-generate-columns="false" allow-add-new="true" allow-delete="true" height="400px"> <c1-flex-grid-column binding="Name"></c1-flex-grid-column> <c1-flex-grid-column binding="Email"></c1-flex-grid-column> <c1-flex-grid-column binding="Phone"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Industry"></c1-flex-grid-column> <c1-flex-grid-column binding="Birthdate"></c1-flex-grid-column> <c1-items-source source-collection="Model"> </c1-items-source> </c1-flex-grid>

Razor

Copy Code

@using ValidationFlexGrid.Models
@model List<UserInfo>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
<br />
<c1-flex-grid id="flexGrid" auto-generate-columns="false" allow-add-new="true" allow-delete="true" height="400px">
    <c1-flex-grid-column binding="Name"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Email"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Phone"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Industry"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Birthdate"></c1-flex-grid-column>
    <c1-items-source source-collection="Model">
    </c1-items-source>
</c1-flex-grid>

Step 4: Build and Run the Project

Click Build | Build Solution to build the project.
Press F5 to run the project.

Limitations

FlexGrid unobtrusive validation does not support Boolean data in check box cell because when you click it, it will end the editing directly.
FlexGrid unobtrusive validation does not support bind to read action URL because cannot get model meta data from read action.
FlexGrid unobtrusive validation does not support datamap column because can not get the actual value when editing.
FlexGrid unobtrusive validation does not support cell template because the "onPrepareCellForEdit" not triggered.

Reference

FlexGridBase<T> Class

FlexGrid<T> Class