CollectionView Validation

FlexGrid works with the CollectionView class to provide item and collection-level validation.

To use this feature, set getError to a function that takes two parameters containing the data item being validated and the property to validate, and returns a string describing the error condition (or null if there are no errors).

The grid below has a data source that implements a getError function that ensures the 'Sales' and 'Expenses' properties of the items contain positive values. To see how validation works, try entering negative values in either column:

The grid has two properties that allow you to customize its validation behavior:

showErrors: Whether the grid should add the 'wj-state-invalid' class to cells that contain validation errors, and tooltips with error descriptions.
validateEdits: Whether the grid should remain in edit mode when the user tries to commit edits that fail validation

// This file locates: "Scripts/Lesson/C1FlexGrid/CollectionViewValidation.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;
 
 
    var view = theGrid.collectionView;
    view.getError = function (item, prop) {
        if (prop == 'Sales' && item.Sales < 0) {
            return 'Sales cannot be negative!';
        }
        if (prop == 'Expenses' && item.Expenses < 0) {
            return 'Expenses cannot be negative!';
        }
    }
 
 
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text3)
</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");
    })
)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text4)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.CollectionViewValidation_Text6)
    </li>
</ul>