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.