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:

Telerik UI for ASP.NET MVC Ninja image

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.

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

In this article