Custom Editing
The Grid enables you to implement custom column editors and to specify validation rules that apply while the user edits the data.
Implementing Custom Editors
To implement a custom editor in the Grid, specify the editor field of the respective column. The value of this field will point to a JavaScript function which will instantiate the column editor for the corresponding column cells. For a runnable example, refer to the demo on editing with custom editors in the Grid.
The following example demonstrates how to use the NumericTextBox as a custom editor in the Grid. The UI for ASP.NET Core Visual Studio Templates come with EditorTemplates which are located in \Views\Shared\EditorTemplates. To utilize the provided Number editor in the example on the popup edit mode of the Grid, decorate the Model field with a [UIHint("Number")] attribute.
public class OrderViewModel
{
public int OrderID { get; set; }
public string ShipCountry { get; set; }
[UIHint("Number")]
public int? Freight { get; set; }
}
@model int?
@(Html.Kendo().NumericTextBoxFor(m => m)
.HtmlAttributes(new { style = "width:100%" })
)
Setting Validation Rules
To define a validation rule on the client-side, extend the Kendo UI for jQuery Validator. The Validator is initialized when an item is in edit mode. For a runnable example, refer to the demo on custom validator editing in the Grid.
Editor Templates
Your project may require you to create a custom editor template. For more details, refer to the following article.