Editing Overview

Editing is a basic functionality of the Telerik UI Grid component for ASP.NET MVC 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 MVC, 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))
       )
   

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

   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 MVC (Demo)
• Inline Editing by the Grid HtmlHelper for ASP.NET MVC (Demo)
• Popup Editing by the Grid HtmlHelper for ASP.NET MVC (Demo)
• Custom Editor by the Grid HtmlHelper for ASP.NET MVC (Demo)
• Custom Validation Editing by the Grid HtmlHelper for ASP.NET MVC (Demo)
• Find Out More in the Knowledge Base
• Server-Side HtmlHelper API