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

Getting Started

To enable editing:

1. Set the Editable configuration:

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

       <kendo-grid name="grid">
           <editable enabled="true"/>
           <!-- Other configuration. -->
       </kendo-grid>
   

   The default edit mode is Inline. To use a different edit mode, specify it through the Mode option:

       @(Html.Kendo().Grid<ProductViewModel>()
           .Name("Grid")
           ...
           .Editable(e => e.Mode(GridEditMode.PopUp))
       )
   

       <kendo-grid name="grid">
           <editable enabled="true" mode="popup"/>
           <!-- Other configuration. -->
       </kendo-grid>
   

   For more information, refer to the HtmlHelper API and TagHelper 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")
       )
   

       <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
           <transport>
               <!-- Other configuration. -->
               <update url="@Url.Action("Editing_Update", "Grid")"/>
           </transport>
       </datasource>
   

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

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

       <model id="ProductID">
           <!-- Other configuration. -->
       </model>
   

   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 HtmlHelper API

• Server-Side TagHelper API