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