Validation

FlexGrid helps with validation in several ways:

Automatic Type Coercion: When cell edits are committed, the grid automatically coerces values to match the column's data type. It also checks for nulls and empty values based on the column's isRequired property. If the data is invalid, the original cell value is restored.
Data Maps: If your grids contain columns that should only allow certain input values, add a DataMap to the column to ensure users will not be able to type invalid content into the cells.
Event-Based Validation: The grid raises a cellEditEnding event that allows you to check the editor's current value and cancels the edit if the new value is invalid.
CollectionView-Based Validation: The grid honors the collection view's getError method to highlight invalid cells and to prevent users from entering invalid information.

The grid below demonstrates the first three ways of validation. It has a Country column with a data map that prevents users from entering invalid countries. The cellEditEnding event is used to ensure that the 'Sales' and 'Expenses' columns contain positive values:

// This file locates: "Scripts/Lesson/C1FlexGrid/Validation.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
 
    theGrid.columns[1].dataMap = countries;
    theGrid.cellEditEnding.addHandler(function(s, e) {
        var col = s.columns[e.col];
        if (col.binding == 'Sales' || col.binding == 'Expenses') {
            var value = wijmo.changeType(s.activeEditor.value, wijmo.DataType.Number, col.format);
            if (!wijmo.isNumber(value) || value < 0) {
                e.cancel = true;
                alert('Please enter a positive amount.')
            }
        }
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Validation
        public ActionResult Validation()
        {
            return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries7));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Validation_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Validation_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Validation_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Validation_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Validation_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Validation_Text5)
    </li>
</ol>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Validation_Text6)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("50").IsReadOnly(true);
        cs.Add().Binding("Country").Header("Country").IsRequired(true);
        cs.Add().Binding("Sales").Header("Sales").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Format("n2");
        cs.Add().Binding("Overdue").Header("Overdue");
    })
)