New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Editing Overview

The Telerik UI for ASP.NET MVC Grid component supports create, update, and delete operations (CRUD) with different modes and user experience.

Basics

The Grid CRUD operations rely on the following algorithm:

Users execute Grid commands (Edit, Save, Delete, and more) with the mouse or keyboard.
The DataSource of the Grid triggers the respective Create, Update, or Destroy actions based on the applied data operation.
The changes are handled in the Controller Action methods, and the new, deleted, or edited data item is returned through the response of the request.
The Grid rebinds to display the latest data.

Model Requirements

Adding, deleting, or editing rows in the Grid sets the following requirements on the Grid model:

The model field names must be valid JavaScript identifiers and contain neither spaces nor special characters. The first character has to be a letter.

The Id() option of the Model() configuration must contain the name of the unique model identifier. The DataSource uses the specified identifier field to track the state of the data items. The Id field must be unique and non-editable, otherwise, unexpected behavior and loss of data might occur.

Razor

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    ... // Additional configuration.
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => 
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
        })
        ... // Additional configuration.
    )
)

All fields defined in the Model() configuration of the DataSource with the Editable(false) option are disabled for editing.

Edit Modes

The Grid offers the following modes to add and edit rows with a different user experience:

Inline editing—Users modify the Grid content row by row.
Popup editing—Users modify the Grid content row by row in a modal popup form.
InCell (Batch) editing—Users modify the Grid content cell by cell.

To enable the editing functionality of the Grid:

Set the Editable configuration:

Razor

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

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")
    ... // Additional configuration.
    .Editable(e => e.Mode(GridEditMode.PopUp))
)

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

Specify the Id field in the Model() configuration of the DataSource:
Razor
```
.Model(model => model.Id(p => p.ProductID))
```
The Model method configures the model of the DataSource. For more information, refer to the Model definition documentation.

Declare the endpoints for the desired actions (Create, Update, Destroy):

Razor

.DataSource(dataSource => dataSource
    .Ajax()
    ... // Additional configuration.
    .Read(read => read.Action("Read", "Grid"))
    .Create(create => create.Action("Create", "Grid"))
    .Update(update => update.Action("Update", "Grid"))
    .Destroy(destroy => destroy.Action("Destroy", "Grid"))
)

Define an Action method for each operation in the Controller. Intercept the Model instance, save the changes, and return the expected response.

The following example shows the Update Action method for an Inline or Popup editable Grid set up with Ajax data binding.

[AcceptVerbs("Post")]
public JsonResult Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
{
    if (product != null && ModelState.IsValid)
    {
        productService.Update(product);
    }

    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

Editing multiple rows at the same time is not supported.

Delete Operation

Delete operations provide the same user experience in all Grid edit modes and require the same configuration:

Delete command button.
Destroy action in the DataSource configuration.
Optional delete confirmation dialog. Use the DisplayDeleteConfirmation() option in the Editable() configuration to determine if the Grid will show a Dialog before triggering the Destroy action so that users can abort the operation.

Razor

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    .Editable(settings => settings.DisplayDeleteConfirmation(false))
    ... // Additional configuration.
)

Delete operations can work even if the Grid editing feature is not enabled.

See the delete operations in action in the complete examples for Grid Inline, InCell, and Popup editing. Also, check how to customize the Delete Confirmation Dialog.

Commands

The Grid provides the following built-in commands that enable users to add, delete, and edit rows:

Create—Adds a new row and puts it in edit mode.
Destroy—Deletes a row.
Edit—Puts a Grid row or cell in edit mode.
Save—Confirms the row or cell changes and exits edit mode if the user input is valid.
Cancel—Cancels the row or cell changes and exits edit mode. The command automatically appears in the Toolbar of the Grid when the Save() command is defined.

Users execute commands in the following ways:

By clicking the column command buttons.
By clicking editable cells in InCell edit mode and then anywhere else on the page.
By using the Grid keyboard navigation.

Command buttons can only reside in Grid column commands or the Grid Toolbar. You can also trigger the desired operation programmatically from anywhere on the page using the client-side methods.

Known Limitations

The following limitations apply when using editing along with other features of the component.

If filtering is applied and the ServerOperation() option 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.