FlexGrid
組み込みの検証
機能
サンプル
設定
説明
このサンプルでは、組み込みの検証の基本的な使用方法を示します。
ErrorTipのCssClassプロパティまたはc1-errortipタグのclass属性を設定することによって、エラーツールチップの外観をカスタマイズすることもできます。
ソース
BuiltInValidationController.cs
using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; 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(FlexGridRes.BuiltInValidation_Message1)' : null; case 'Product': return validProducts.indexOf(item[property]) < 0 ? '@Html.Raw(FlexGridRes.BuiltInValidation_Message2)' : null; case 'Amount2': return item[property] < 0 || item[property] >= 5000 ? '@Html.Raw(FlexGridRes.BuiltInValidation_Message3)' : null; case 'Active': return item[property] && item['Country'] && item['Country'].match(/US|UK/) ? '@Html.Raw(FlexGridRes.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> <c1-items-source id="validationCV" get-error="getError" source-collection="Model" update-action-url="@Url.Action("GridUpdateSale")" create-action-url="@Url.Action("GridCreateSale")" delete-action-url="@Url.Action("GridDeleteSale")"> </c1-items-source> <c1-flex-grid id="DemoControl" auto-generate-columns="false" allow-add-new="true" allow-delete="true" height="400px" items-source-id="validationCV"> <c1-flex-grid-column binding="ID" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-flex-grid-errortip class="red-yellow-errortip"></c1-flex-grid-errortip> </c1-flex-grid> @section Description{ <p>@Html.Raw(FlexGridRes.BuiltInValidation_Text0)</p> <p>@Html.Raw(FlexGridRes.BuiltInValidation_Text1)</p> }
マニュアル