Category / Section
How to access row data in custom validator?
1 min read
Custom validation rules can be set to a column using the “validationRules” property of the column in grid. But, in certain cases, the user may expect to set validation to a column based on another column value i.e., set conditional validation to a column
Solution
Let us consider a grid column on which we need to perform custom validation considering another column value.
Example
Let us now see in detail how to achieve the above requirement in grid.
- Render the Grid control
JS
<div id="Grid"></div> <script type="text/javascript"> $(function () {// Document is ready. $("#Grid").ejGrid({ // the datasource "window.gridData" is referred from jsondata.min.js dataSource: window.gridData, allowPaging: true, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, { field: "CustomerID", headerText: 'Customer ID', width: 90, validationRules: { customRegex: 5 } }, { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80 }, { field: "Freight", headerText: 'Freight', format: "{0:C}", textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { customCompare: [0, 1000] }, width: 80 }, { field: "ShipCity", headerText: 'Ship City', width: 90 }, { field: "ShipName", headerText: 'Ship Name', width: 130 } ] }); }); </script>
MVC:
[In View] @(Html.EJ().Grid<EditableOrder>("CustomValidation") .Datasource((IEnumerable<object>)ViewBag.data) .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .AllowPaging() .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(85).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).EditType(EditingType.String).ValidationRules(v => v.AddRule("customRegex", 5)).Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).Width(80).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).EditType(EditingType.Numeric).Format("{0:C}").ValidationRules(rule => rule.AddRule("customCompare", new List<object>() { 0, 1000 })).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(90).Add(); col.Field("ShipName").HeaderText("Ship Name").Width(130).Add(); }) ) [In controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult Index() { var DataSource = OrderRepository.GetAllRecords(); ViewBag.data = DataSource; return View(); } } }
ASP.NET
[aspx] <ej:Grid id="FlatGrid" runat="server" allowpaging="True"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75" > <ValidationRule> <ej:KeyValue Key="required" Value="true" /> <ej:KeyValue Key="number" Value="true" /> </ValidationRule> </ej:Column> <ej:Column Field="CustomerID" EditType="String" HeaderText="Customer ID" Width="90"> <ValidationRule> <ej:KeyValue Key="customRegex" Value="5" /> </ValidationRule> </ej:Column> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="70" EditType="Dropdown" /> <ej:Column Field="Freight" EditType="Numeric" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}"> <ValidationRule> <ej:KeyValue Key="customCompare" Value="[0,1000]"/> </ValidationRule> </ej:Column> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" /> <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100"/> </Columns> </ej:Grid> [CS] public partial class _Default : Page { List<Orders> order = new List<Orders>(); protected void Page_Load(object sender, EventArgs e) { this.OrdersGrid.DataSource = new NorthwindDataContext().Orders; this.OrdersGrid.DataBind(); } }
- Using the jQuery serializeArray method, we have fetched the form data. Since the serializeArray method, doesn’t return the values corresponding to disabled elements, we have created a plugin to fetch the disabled elements also from the form elements.
<script type="text/javascript"> $(function () { $.fn.serializeAllArray = function () { var data = $(this).serializeArray();//returns the form data $(':disabled[name]', this).each(function () { data.push({ name: this.name, value: $(this).val() });//push the disabled elements values also to the JSON array }); return data; } $.validator.addMethod("customCompare", function (value, element, params) { var data = $(element.closest("form")).serializeAllArray();//holds the form data in name and value pair return element.value > params[0] && element.value < params[1]; }, "Freight value must be between 0 and 1000"); $.validator.addMethod("customRegex", function (value, element, params) { if (element.value.length == params) return true; return false; }, "Customer ID must be 5 characters"); }); </script>
Thus, the form data elements, will be obtained within the custom validator and thus we can perform corresponding actions in the validator.