Editing Overview

Editing is a basic functionality of the Telerik UI Grid component for ASP.NET Core which allows you to manipulate the way its data is presented.

The Grid provides the following edit modes:

The Editing is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

• Inline editing
• Popup editing
• Incell editing
• Custom editors and validation
• WebAPI editing

Getting Started

To enable editing:

1. Set the editable option:

   @(Html.Kendo().Grid<ProductViewModel>()
   .Name("Grid")
   ...
   .Editable(e => e.Enabled(true))
   

   The default edit mode is Inline. To use a different edit mode, specify it:

   .Editable(e => e.Mode(GridEditMode.PopUp))
   

   For more information, refer to the API options on the possible configurations.

2. Declare the endpoint to which the updated records will be sent:

   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       ...
       .Update("Editing_Update", "Grid")
   

3. Specify the Id of the Model within the DataSource declaration:

   .Model(model => model.Id(p => p.ProductID))
   

   The Model method configures the model of the data source. For more information, refer to the article about the Model definition.

4. On the server, the expected parameters must be the DataSource request and the same model as the edited one:

       [AcceptVerbs("Post")]
       public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
       {
           if (product != null && ModelState.IsValid)
           {
               productService.Update(product);
           }
   
           return Json(new[] { product }.ToDataSourceResult(request, ModelState));
       }
   

   For runnable examples, refer to the demos on implementing the editing approaches in the Grid.

See Also

• Incell Editing by the Grid HtmlHelper for ASP.NET Core (Demo)
• Inline Editing by the Grid HtmlHelper for ASP.NET Core (Demo)
• Popup Editing by the Grid HtmlHelper for ASP.NET Core (Demo)
• Custom Editor by the Grid HtmlHelper for ASP.NET Core (Demo)
• Custom Validation Editing by the Grid HtmlHelper for ASP.NET Core (Demo)
• Find Out More in the Knowledge Base
• Server-Side API