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
The steps below will cover the scenario of using a NumericTextBox as a custom editor for a field in the grid.
The UI for ASP.NET Core Visual Studio Templates come with EditorTemplates which are located in
\Views\Shared\EditorTemplates
. If such a folder is not existent, create one.-
Add a cshtml file to the
EditorTemplates
folder and name itNumber
. Specify the field's data type at the top.@model int? @(Html.Kendo().NumericTextBoxFor(m => m) .HtmlAttributes(new { style = "width:100%" }) )
-
In the C# class declaration decorate the needed properties with the
UIHint
data attribute.public class OrderViewModel { public int OrderID { get; set; } public string ShipCountry { get; set; } [UIHint("Number")] public int? Freight { get; set; } }
For additional use-cases and information refer to the Editor Templates article of the grid:
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.
ForeignKey Column Editor
To create an editable grid a foreign key:
Define a ForeignKey column in the grid.
-
Bind the column to a collection and specify the
DataValueField
andDataTextField
.- Local data binding:
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName");
<foreign-key-column field="CategoryID" title="Category" width="150" values='(System.Collections.IEnumerable)ViewData["categories"]' value-field="CategoryID" text-field="CategoryName"> </foreign-key-column>
- Remote data binding:
columns.ForeignKey(p => p.CategoryID, ds=> ds.Read(r => r.Action("Categories", "Grid")), "CategoryID", "CategoryName");
<foreign-key-column field="CategoryID" title="Category" width="200" value-field="CategoryID" text-field="CategoryName"> <datasource> <transport> <read url="/grid/categories"/> </transport> </datasource> </foreign-key-column>
-
Specify default value for the column in the model of the data source:
.DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.CategoryID).DefaultValue(1); }) // other options omitted for brevity. )
<datasource type="DataSourceTagHelperType.Ajax"> <schema> <model id="ProductID"> <fields> <field name="ProductID" editable="false"></field> <field name="CategoryID" default-value="4"></field> </fields> </model> </schema> </datasource>
Add a cshtml file within the
/Views/Shared/EditorTemplates
folder of your project and name itGridForeignKey
. If this folder does not exist, add it manually.-
Set the content of the file to be a DropDownList:
@model object @( Html.Kendo().DropDownListFor(m => m) .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]) )
For the complete examples, check out our live demos at: