New to Telerik UI for ASP.NET Core? Download free 30-day trial

Editing custom editor

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Theme Builder
  • editing_custom.cshtml
  • Editing_CustomController.cs
  • ProductService.cs
  • ClientCategory.cshtml
  • ProductViewModel.cs

Also available for:

API REFERENCE

Description

In numerous scenarios there is a requirement to not only visualize data in a table structure, but also to have the ability to manipulate it and save the changes.

The Core Grid wrapper supports CRUD data editing operations via a simple configuration of its data source. All you have to do to enable its data editing capabilities is to:

  • Set the grid's editable configuration option: .Editable(editable => editable.Mode(GridEditMode.InCell))
  • Specify a unique field in the Model as the DataSource Model Id
  • Configure the DataSource for performing CRUD data operations defining its Read, Create, Update and Destroy actions
  • To enable insertion of new records add the New Record button on the toolbar: .ToolBar(toolbar => toolbar.Create())
  • To enable the Delete command on each row insert a new column: columns.Command(command => { command.Destroy(); });

In this demo you can see how to further customize the editor for the Category field which is an object(a complex type). To make sure the ASP.NET Core Grid uses the custom editor, add in the ~Views\Shared\EditorTemplates folder.

Sample declaration: @(Html.Kendo().DropDownListFor(m => m)

So the grid invokes the editor, decorate the model property with the UIHint attribute

[UIHint("ClientCategory")]
public CategoryViewModel Category { get; set;}

Specify a default value that will be used initially when creating an item:

model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);


More about the Custom Editors in the Telerik Grid for ASP.NET Core

More about Telerik Grid for ASP.NET Core

Support & Learning Resources