FlexGrid
FlexGrid
Built-in Validation
This sample shows the basic usage of the built-in validation.
Features
ID
Product
Country
Color
Amount2
Discount
Active
1
Gadget
German
Green
1,030.17
0.14
2
Gadget
Italy
Green
3,499.71
0.13
3
Gadget
China
Black
4,535.49
0.20
4
Widget
France
Green
432.90
0.21
5
Widget
UK
Red
3,355.18
0.12
6
Aoba
Russia
Black
5,000
0.30
7
InputMan
New Zealand
Red
-10
0.30
ID
Product
Country
Color
Amount2
Discount
Active
0
Settings
Show Errors: True
Validate Edits: True
Error Tip Style: red-yellow-errortip
Tooltip Position: Above
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 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)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | @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 > } |