FlexGrid
Built-in Validation
Features
Sample
Settings
Description
This sample shows the basic usage of the built-in validation.
You can also customize error tooltip's appearance by setting CssClass property of ErrorTip or class attribute of c1-errortip tag using CSS.
Source
BuiltInValidationController.cs
using System.Web.Mvc; using System.Collections.Generic; using System.Linq; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using System; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static List<Sale> ValidationSales = Sale.GetValidationData().ToList(); // GET: BuiltInValidation public ActionResult BuiltInValidation() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateValidationSettings() }; return View(ValidationSales); } private static IDictionary<string, object[]> CreateValidationSettings() { var settings = new Dictionary<string, object[]> { {"ShowErrors", new object[]{ true, false }}, {"ValidateEdits", new object[]{ true, false }}, {"ErrorTipStyle", new object[]{ "red-yellow-errortip", "gradient-errortip", "text-style-errortip", "strong-round-errortip" }}, {"TooltipPosition", new object[]{ "Above", "AboveRight", "RightTop", "Right", "RightBottom", "BelowRight", "Below", "BelowLeft", "LeftBottom", "Left", "LeftTop", "AboveLeft" }} }; return settings; } public ActionResult GridUpdateSale([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, item => { string error = string.Empty; bool success = true; try { var resultItem = ValidationSales.Find(s => s.ID == item.ID); var index = ValidationSales.IndexOf(resultItem); ValidationSales.Remove(resultItem); ValidationSales.Insert(index, item); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Sale> { Error = error, Success = success, Data = item }; }, () => ValidationSales)); } public ActionResult GridCreateSale([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, item => { string error = string.Empty; bool success = true; try { ValidationSales.Add(item); item.ID = ValidationSales.Max(s => s.ID) + 1; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Sale> { Error = error, Success = success, Data = item }; }, () => ValidationSales)); } public ActionResult GridDeleteSale([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, item => { string error = string.Empty; bool success = true; try { var resultItem = ValidationSales.Find(u => u.ID == item.ID); ValidationSales.Remove(resultItem); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Sale> { Error = error, Success = success, Data = item }; }, () => ValidationSales)); } } }
BuiltInValidation.cshtml
@model List<Sale> @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } <script type="text/javascript"> var validCountries = ["US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia"]; var validProducts = ["Widget", "Gadget", "Doohickey"]; function getError(item, property) { switch (property) { case 'Country': return validCountries.indexOf(item[property]) < 0 ? '@Html.Raw(Resources.FlexGrid.BuiltInValidation_Message1)' : null; case 'Product': return validProducts.indexOf(item[property]) < 0 ? '@Html.Raw(Resources.FlexGrid.BuiltInValidation_Message2)' : null; case 'Amount2': return item[property] < 0 || item[property] >= 5000 ? '@Html.Raw(Resources.FlexGrid.BuiltInValidation_Message3)' : null; case 'Active': return item[property] && item['Country'] && item['Country'].match(/US|UK/) ? '@Html.Raw(Resources.FlexGrid.BuiltInValidation_Message4)' : null; } return null; } function customChangeErrorTipStyle(control, value) { var grid = wijmo.Control.getControl('#DemoControl') grid.errorTip.cssClass = value; } function customChangeTooltipPosition(control, value) { control.errorTip.position = value; } </script> <style> .red-yellow-errortip { background-color: red; color: yellow; } .gradient-errortip { background-color: greenyellow; background-image: radial-gradient(circle at top right, yellow, #f06d06 50%); color: white; } .text-style-errortip { background-color: lightyellow; color: red; font-style: oblique; text-shadow: 2px 2px 5px orangered; } .strong-round-errortip { background-color: lightgoldenrodyellow; color: red; border-radius: 10%; } </style> @(Html.C1().CollectionViewService().Id("validationCV") .GetError("getError") .Bind(Model) .Update(Url.Action("GridUpdateSale")) .Create(Url.Action("GridCreateSale")) .Delete(Url.Action("GridDeleteSale")) ) @(Html.C1().FlexGrid<Sale>() .Id("DemoControl") .AutoGenerateColumns(false) .Columns(columns => columns .Add(c => c.Binding("ID").IsReadOnly(true)) .Add(c => c.Binding("Product")) .Add(c => c.Binding("Country")) .Add(c => c.Binding("Color")) .Add(c => c.Binding("Amount2")) .Add(c => c.Binding("Discount")) .Add(c => c.Binding("Active")) ).ItemsSourceId("validationCV") .AllowAddNew(true) .AllowDelete(true) .CssStyle("height", "400px") .ErrorTip(tip => { tip.CssClass("red-yellow-errortip"); }) ) @section Description{ <p>@Html.Raw(Resources.FlexGrid.BuiltInValidation_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.BuiltInValidation_Text1)</p> }
Documentation