Grid Validation
The editable Grid supports built-in validation that is enabled by default. This article describes how the Grid validation works, how to create custom validation rules, and implement server-side validation.
Basics
By default, the Grid consumes the DataAnnotation
attributes that are added to the model. The HTML5 data-*
attributes are generated in the HTML markup of each editor based on the DataAnnotation
attributes applied to the properties of the model that binds to the Grid. For more information on the supported DataAnnotation
attributes, refer to the general validation documentation.
The editable Grid initializes the Kendo UI for jQuery Validator internally to perform client-side validation based on the defined DataAnnotation
attributes. The Validator creates validation rules based on the unobtrusive HTML attributes.
In all edit modes of the Grid, the validation messages are displayed as tooltips for the invalid inputs.
Custom Validation
You can extend the default validation rules of the Grid's Validator and perform additional client-side validations.
To implement a custom validation rule, you need to:
- Create a custom
DataAnnotation
attribute and decorate the respective model property with the new attribute. - Extend the built-in validation rules of the Validator and register the new validation.
The following example shows how to implement a CustomProductNameValidation
attribute to check whether the entered ProductName
starts with a capital letter.
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
public class ProductViewModel
{
public int ProductID { get; set; }
[Required]
[CustomProductNameValidation(ErrorMessage = "ProductName should start with capital letter")]
public string ProductName { get; set; }
}
public class CustomProductNameValidationAttribute : ValidationAttribute
{
public override bool IsValid(object value)
{
var productName = (string)value;
if (!string.IsNullOrEmpty(productName))
{
return Regex.IsMatch(productName, "^[A-Z]");
}
return true;
}
}
For a live example, visit the Custom Validator in an Inline editable Grid.
Handling ModelState Errors
When editing the Grid's data, server validation is often needed.
This section demonstrates how to use the AddModelError()
method to add model errors and display them in an Inline or Popup editable Grid when invalid data is entered.
-
Within the
Update
,Create
, orDestroy
actions of the editable Grid, validate the received data and add the errors to theModelState
using theAddModelError()
method. For example, let's check the length of theShipCountry
property when modifying an existing record in an Inline editable Grid.C#public JsonResult Update([DataSourceRequest]DataSourceRequest request, OrderViewModel order) { if (order.ShipCountry.Length < 3) { ModelState.AddModelError("ShipCountry", "ShipCountry must be at least three characters long."); } if (ModelState.IsValid) { // Save the item in the database or follow with the dummy data. for (int i = 0; i < orders.Count; i++) { // The example uses the model Id to identify the model that needs to be updated. if(orders[i].OrderID == order.OrderID) { orders[i] = order; break; } } } // Return a collection with the modified data item and the ModelState that holds the custom error. return Json(new[] { order }.ToDataSourceResult(request, ModelState)); }
-
Subscribe to the
Error()
event of the DataSource. The event fires when the response of the DataSource request contains errors (for example,ModelState
errors).Razor@(Html.Kendo().Grid<ProductViewModel>() .Name("grid") ... // Additional configuration. .DataSource(d => { d.Ajax() .Model(model => { model.Id(product => product.OrderID); model.Field(product => product.OrderID).Editable(false); }) .Read(read => read.Action("Read", "Grid")) .Update(update => update.Action("Update", "Grid")) .Events(events => events.Error("onError")); // Handle the Error event of the DataSource. }) )
-
Within the
Error
event handler, to prevent the Grid from exiting edit mode when there are server-side errors, get the Grid instance and prevent itsdataBinding
event. Retrieve the received error messages from the server and display them as tooltips for the respective editors.JS<script> function onError(args) { var errors = args.errors; if (errors) { var grid = $("#grid").data("kendoGrid"); // Get a reference to the Grid. grid.one("dataBinding", function (e) { e.preventDefault(); // Prevent its "dataBinding" event. $.each(errors, function (key, value) { // Loop through the received errors. var message = ""; if ('errors' in value) { $.each(value.errors, function() { // Loop through the error messages. message += this + "\n"; }); } // As long as the key matches the field name, validation message will be displayed as a tooltip. grid.editable.element.find("[data-valmsg-for='" + key + "']").replaceWith(`<div class="k-tooltip k-tooltip-error" style="margin:0.5em">${kendo.ui.icon({ icon: 'exclamation-circle', type: 'svg' })} ${message}<div class="k-callout k-callout-n"></div></div>`).show(); }); }); } } </script>