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

1. Users execute [Grid commands (**Edit**, **Save**, **Delete**, and more)](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/overview#commands) with the mouse or keyboard.
2. The DataSource of the Grid triggers the respective `Create`, `Update`, or `Destroy` actions based on the applied data operation.
3. 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.
4. 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 HtmlHelper
  @(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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/inline)—Users modify the Grid content row by row.
* [Popup editing](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/popup)—Users modify the Grid content row by row in a modal popup form.
* [InCell (Batch) editing](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/batch)—Users modify the Grid content cell by cell.

To enable the editing functionality of the Grid:

1. Set the `Editable` configuration:

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

   The default edit mode is [Inline](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/inline). To use a different edit mode, specify it through the `Mode()` option:

   ```Razor HtmlHelper
   @(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](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/grideditingsettingsbuilder).

2. Specify the `Id` field in the `Model()` configuration of the DataSource:

   ```Razor HtmlHelper
   .Model(model => model.Id(p => p.ProductID))
   ```

   > The `Model` method configures the model of the DataSource. For more information, refer to the [`Model` definition](https://docs.telerik.com/aspnet-mvc/html-helpers/datasource/model) documentation.

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

   ```Razor HtmlHelper
   .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"))
   )
   ```

4. 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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/ajax-binding).

   ```C#
   [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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/overview#commands).
* `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 HtmlHelper
@(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.

> tip See the delete operations in action in the complete examples for Grid [Inline](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/inline), [InCell](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/batch), and [Popup](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/popup) editing. Also, check how to [customize the Delete Confirmation Dialog](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/grid-custom-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](https://demos.telerik.com/aspnet-mvc/grid/keyboard-navigation).

Command buttons can only reside in Grid [column commands](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridcolumnfactory#commandsystemaction) or the Grid [Toolbar](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/toolbar). You can also trigger the desired operation programmatically from anywhere on the page using the [client-side methods](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid#methods).

In versions before 2023.1.314, the Grid update command used `k-grid-update`; in versions 2023.1.314 and later, use `k-grid-save-command`. This command class is a client-side CSS and behavior hook and is separate from the `Update()` configuration of the Grid DataSource. ListView editor templates use `k-update-button` and `k-cancel-button` instead. For more information, see the [2023 breaking changes](https://www.telerik.com/aspnet-mvc/documentation/backwards-compatibility/2023-backwards-compatibility).

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

## See Also

* [Inline Editing by the Grid for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/editing-inline)
* [Popup Editing by the Grid for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/editing-popup)
* [InCell Editing by the Grid for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/editing)
* [Custom Editor by the Grid for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/editing-custom)
* [Custom Validation Editing by the Grid for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation)
* [Find Out More in the Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)
* [Server-Side HtmlHelper API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)