aspnetmvc-16140-components-grid-view-data-editing-and-validation-data-editing.md
The ASP.NET MVC GridView provides built-in data editing functionality. This topic describes how to enable data editing operations within the GridView.
To follow the steps described in this topic, you will need a data-bound GridView extension in your project.
You can enable data editing operations within your GridView in the following way.
Add the controller action method that will add new records to a data source.
Add the controller action method that will save the updated records to a data source.
Add the controller action method that will delete existing records from a data source.
Define the callback route values within the PartialView.
Enable the command column and command items.
GridView provides a full-featured client-side API that allows you to manipulate the edit form via JS code. The table below lists the available data editing-related methods.
| Method | Description |
|---|---|
| ASPxClientGridView.AddNewRow (via MVCxClientGridView .AddNewRow ) | Adds a new record. |
| ASPxClientGridView.StartEditRow (via MVCxClientGridView .StartEditRow ) | Opens an edit form for editing a specified row. |
| ASPxClientGridView.StartEditRowByKey (via MVCxClientGridView .StartEditRowByKey ) | Opens an edit form for editing a row with the specified key. |
| ASPxClientGridView.SetEditValue (via MVCxClientGridView .SetEditValue ) | Sets the value of the specified edit cell. |
| ASPxClientGridView.IsNewRowEditing (via MVCxClientGridView .IsNewRowEditing ) | Indicates whether or not a new row is being edited. |
| ASPxClientGridView.IsEditing (via MVCxClientGridView .IsEditing ) | Indicates whether or not the GridView extension is in edit mode. |
| ASPxClientGridView.UpdateEdit (via MVCxClientGridView .UpdateEdit ) | Saves all changes made and switches the GridView extension to browse mode. |
| ASPxClientGridView.CancelEdit (via MVCxClientGridView .CancelEdit ) | Cancels all changes made and switches the GridView extension to browse mode. |
| ASPxClientGridView.DeleteRow (via MVCxClientGridView .DeleteRow ) | Deletes the specified row. |
| ASPxClientGridView.DeleteRowByKey (via MVCxClientGridView .DeleteRowByKey ) | Deletes a row with the specified key value. |
Example
In this example, the ASPxClientGridView.RowDblClick (via MVCxClientGridView .RowDblClick ) client-side event is handled to switch the GridView to edit mode by double-clicking a data row. The event handler calls the ASPxClientGridView.StartEditRow (via MVCxClientGridView .StartEditRow ) method. This method receives the visible index of the double-clicked row and invokes an edit form.
@{
var grid = Html.DevExpress().GridView(settings => {
settings.Name = "GridView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home", Action = "GridViewPartialAddNew" };
settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home", Action = "GridViewPartialUpdate" };
settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home", Action = "GridViewPartialDelete" };
settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowNewButton = true;
settings.CommandColumn.ShowDeleteButton = true;
settings.CommandColumn.ShowEditButton = true;
settings.KeyFieldName = "CustomerID";
settings.Columns.Add("CompanyName");
settings.Columns.Add("ContactName");
settings.Columns.Add("ContactTitle");
settings.Columns.Add("Phone");
// When an end-user double-clicks a grid row, the edit form appears, allowing an end-user to edit the row.
settings.ClientSideEvents.RowDblClick = "function(s, e) { s.StartEditRow(e.visibleIndex); }";
});
if (ViewBag.EditError != null)
{
grid.SetEditErrorText(ViewBag.EditError);
}
}
@grid.Bind(Model).GetHtml()
See Also