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:

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

Getting Started

To enable editing:

1. Set the Editable configuration:

   Razor

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

   Razor

       <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:

   Razor

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

   Razor

       <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:

   Razor

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

   Razor

       <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:

   Razor

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

   Razor

       <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:

   Razor

       [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.

Known Limitations

There are limitations when using editing along with other features of the component.

• If filtering is applied and ServerOperation is disabled in the DataSource configuration, adding new records is not allowed.
• The component behaves differently, when it is grouped and you add a new record. If ServerOperation is enabled in the DataSource configuration, the new row is added as part of a separate (duplicate) group. If ServerOperation is disabled, the new row is added as part of an existing group.

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