Editing with Edit Form

The Grid View control provides end-user data editing functionality out of the box. The commands for end-user data modification are displayed within a command column. Add this column to the grid’s Columns to allow editing.

The editing functionality requires a specified key field. You can specify it via the KeyFieldName method.

Additionally, you need to implement data modification logic in controller actions for each basic data editing operation: Create, Update and Delete. Each method should contain model modification logic and return the GridView's view. Use the MapRoute methods with the specified RouteType to map the Grid View AJAX requests to each editing action.

If an error occurs during an editing operation, you can pass error text from a controller action to the view and assign this text to Grid View using the EditErrorText method.

The Grid View supports the model's data annotation attributes (including validation attributes, such as Required and MaxLength), which allows you specify certain data editor settings declaratively in the model class definition.

Grid View's methods:

  • SettingsEditing - Provides access to setting allowing you to set editing mode and other options related to editing operations.
  • EditErrorText - Specifies error text that should be shown if an editing operation failed. You can pass the error text from a controller action to the view using the ViewData dictionary.

Configure a command column to display data editing command items:

  • ShowNewButtonInHeader - Adds a New button to a command column's header cell.
  • ShowEditButton - Adds an Update button to command column cells.
  • ShowDeleteButton - Adds a Delete button to command column cells.

Data editing operations can also be performed using client-side methods:

  • addNewRow - Adds a new row.
  • deleteRowByKey - Deletes a row with the specified key value.
  • deleteRow - Deletes a row based on its visible index.
  • startEditRow - Starts row editing (shows the Edit Form) based in the row's visible index.
  • startEditRowByKey - Starts editing a row with the specified key value.
  • cancelEdit - Closes the Edit Form and rolls back all unsaved changes.
First Name Last Name Title Birth Date City Country
NancyDavolioSales Representative12/8/1978SeattleUSA
 AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>()
    .Name("gridWithEditForm")
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("EditingWithEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.AddRow)
            .Action("InsertRowEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .Action("UpdateRowEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.DeleteRow)
            .Action("DeleteRowEditForm")
            .Controller("GridView")))
    .KeyFieldName(m => m.ID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowNewButtonInHeader(true)
            .ShowEditButton(true)
            .ShowDeleteButton(true);
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Title);
        columns.Add(m => m.BirthDate);
        columns.Add(m => m.City);
        columns.Add(m => m.Country);
    })
    .OnInitialized((grid, e) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(EditableEmployeesDataContext editFormEmployees) {
            EditFormEmployees = editFormEmployees;
        }
        protected EditableEmployeesDataContext EditFormEmployees { get; }
        public IActionResult EditingWithEditForm() {
            return PartialView("Editing/EditingWithEditForm", EditFormEmployees.Get());
        }
        public IActionResult InsertRowEditForm(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Insert(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingWithEditForm", EditFormEmployees.Get());
        }
        public IActionResult UpdateRowEditForm(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Update(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingWithEditForm", EditFormEmployees.Get());
        }
        public IActionResult DeleteRowEditForm(int id = -1) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Remove(id);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingWithEditForm", EditFormEmployees.Get());
        }
    }
}
using System;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace DevExpress.AspNetCore.Demos {
    public class EditableEmployee {
        public int ID { get; set; }
        [Required, MaxLength(20)]
        public string FirstName { get; set; }
        [Required, MaxLength(10)]
        public string LastName { get; set; }
        [MaxLength(30)]
        public string Title { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        [MaxLength(15)]
        public string City { get; set; }
        [MaxLength(15)]
        public string Country { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
    }
}

Batch Editing and Updating

The Grid View control allows you to edit and update multiple grid rows on the client side and send them to the server in a single request.

To enable the batch editing functionality, pass the GridViewEditingMode.Batch argument to the Mode method. In this mode, grid data contained in a page can be edited using in-line editors. The modified cells are highlighted. Deleted rows are also highlighted and display the Recover command item. To specify that deleted rows should be hidden, call the HighlightDeletedRows (available through SettingsEditing.BatchEditSettings) method with the false argument. All changes are maintained on the client side until the Save changes link is clicked, or all changes are canceled by clicking the Cancel changes button.

To get new, modified and removed items from the underlying data source on the Controller side, use the BootstrapGridBatchUpdateValues<TModel, TKey> class. In addition to operating with the underlying data source’s data items, this class provides the following functionality:

You can customize the batch edit mode settings using methods available through the BatchEditSettings method.

The client batchEditApi property provides access to the batch editing client API. The batchEditStartEditing and batchEditEndEditing client-side events occur when a grid switches to/leaves the batch edit mode.

First Name Last Name Title Birth Date City Country
NancyDavolioSales Representative12/8/1978SeattleUSA
AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
      .BootstrapGridView<EditableEmployee>("gridWithBatchEditing")
      .SettingsEditing(editing => editing.Mode(GridViewEditingMode.Batch))
      .Routes(routes => routes
          .MapRoute(r => r
              .Action("BatchEditingAndUpdating")
              .Controller("GridView"))
          .MapRoute(r => r
              .RouteType(GridViewRouteType.BatchUpdate)
              .Action("BatchEditingUpdateModel")
              .Controller("GridView")))
      .KeyFieldName(m => m.ID)
      .Columns(columns => {
          columns
              .AddCommandColumn()
              .ShowNewButtonInHeader(true)
              .ShowDeleteButton(true);
          columns.Add(m => m.FirstName);
          columns.Add(m => m.LastName);
          columns.Add(m => m.Title);
          columns.Add(m => m.BirthDate);
          columns.Add(m => m.City);
          columns.Add(m => m.Country);
      })
      .Bind(Model))
using System;
using DevExpress.AspNetCore.Bootstrap;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController {
        public GridViewController(EditableEmployeesDataContext batchEditingEmployees) {
            BatchEditingEmployees = batchEditingEmployees;
        }
        protected EditableEmployeesDataContext BatchEditingEmployees { get; }
        public IActionResult BatchEditingAndUpdating() {
            return PartialView("Editing/BatchEditingAndUpdating", BatchEditingEmployees.Get());
        }
        public IActionResult BatchEditingUpdateModel(BootstrapGridBatchUpdateValues<EditableEmployee, int> batchUpdateValues) {
            foreach (var employee in batchUpdateValues.Insert) {
                if(batchUpdateValues.IsValid(employee))
                    try {
                        BatchEditingEmployees.Insert(employee);
                    } catch (Exception e) {
                        batchUpdateValues.SetErrorText(employee, e.Message);
                    }
            }
            foreach (var employee in batchUpdateValues.Update) {
                if(batchUpdateValues.IsValid(employee))
                    try {
                        BatchEditingEmployees.Update(employee);
                    } catch (Exception e) {
                        batchUpdateValues.SetErrorText(employee, e.Message);
                    }
            }
            foreach (var key in batchUpdateValues.DeletedKeys) {
                try {
                    BatchEditingEmployees.Remove(key);
                } catch (Exception e) {
                    batchUpdateValues.SetErrorText(key, e.Message);
                }
            }
            return PartialView("Editing/BatchEditingAndUpdating", BatchEditingEmployees.Get());
        }
    }
}
using System;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace DevExpress.AspNetCore.Demos {
    public class EditableEmployee {
        public int ID { get; set; }
        [Required, MaxLength(20)]
        public string FirstName { get; set; }
        [Required, MaxLength(10)]
        public string LastName { get; set; }
        [MaxLength(30)]
        public string Title { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        [MaxLength(15)]
        public string City { get; set; }
        [MaxLength(15)]
        public string Country { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
    }
}

Editing in Popup Edit Form

In this mode, the Edit Form is displayed within a popup window. To use this mode, pass the GridViewEditingMode.PopupEditForm argument to the Mode method (available through SettingsEditing).

You can access settings of the popup control containing the Edit Form using the EditForm method (available through SettingsPopup).

First Name Last Name Title Birth Date City Country
NancyDavolioSales Representative12/8/1978SeattleUSA
AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>()
    .Name("gridEditingInPopupEditForm")
    .SettingsEditing(editing => editing.Mode(GridViewEditingMode.PopupEditForm))
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("EditingInPopupEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.AddRow)
            .Action("InsertRowEditingInPopupEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .Action("UpdateRowEditingInPopupEditForm")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.DeleteRow)
            .Action("DeleteRowEditingInPopupEditForm")
            .Controller("GridView")))
    .KeyFieldName(m => m.ID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowNewButtonInHeader(true)
            .ShowEditButton(true)
            .ShowDeleteButton(true);
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Title);
        columns.Add(m => m.BirthDate);
        columns.Add(m => m.City);
        columns.Add(m => m.Country);
    })
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(EditableEmployeesDataContext editingInPopupEditFormEmployees) {
            EditingInPopupEditFormEmployees = editingInPopupEditFormEmployees;
        }
        protected EditableEmployeesDataContext EditingInPopupEditFormEmployees { get; }
        public IActionResult EditingInPopupEditForm() {
            return PartialView("Editing/EditingInPopupEditForm", EditingInPopupEditFormEmployees.Get());
        }
        public IActionResult InsertRowEditingInPopupEditForm(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditingInPopupEditFormEmployees.Insert(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingInPopupEditForm", EditingInPopupEditFormEmployees.Get());
        }
        public IActionResult UpdateRowEditingInPopupEditForm(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditingInPopupEditFormEmployees.Update(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingInPopupEditForm", EditingInPopupEditFormEmployees.Get());
        }
        public IActionResult DeleteRowEditingInPopupEditForm(int id = -1) {
            if(ModelState.IsValid)
                try {
                    EditingInPopupEditFormEmployees.Remove(id);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/EditingInPopupEditForm", EditingInPopupEditFormEmployees.Get());
        }
    }
}
using System;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace DevExpress.AspNetCore.Demos {
    public class EditableEmployee {
        public int ID { get; set; }
        [Required, MaxLength(20)]
        public string FirstName { get; set; }
        [Required, MaxLength(10)]
        public string LastName { get; set; }
        [MaxLength(30)]
        public string Title { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        [MaxLength(15)]
        public string City { get; set; }
        [MaxLength(15)]
        public string Country { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
    }
}

Inline Editing

In the inline editing mode, the Grid View control displays an In-Line Edit Row instead of the edited data row. The edit row displays edit cells that correspond to visible data columns. To use this mode, pass the GridViewEditingMode.Inline argument to the Mode method (available through SettingsEditing).

First Name Last Name Title Birth Date City Country
NancyDavolioSales Representative12/8/1978SeattleUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>()
    .Name("gridInlineEditing")
    .SettingsEditing(editing => editing.Mode(GridViewEditingMode.Inline))
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("InlineEditing")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.AddRow)
            .Action("InsertRowInlineEditing")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .Action("UpdateRowInlineEditing")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.DeleteRow)
            .Action("DeleteRowInlineEditing")
            .Controller("GridView")))
    .KeyFieldName(m => m.ID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowNewButtonInHeader(true)
            .ShowEditButton(true)
            .ShowDeleteButton(true);
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Title);
        columns.Add(m => m.BirthDate);
        columns.Add(m => m.City);
        columns.Add(m => m.Country);
    })
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(EditableEmployeesDataContext inlineEditingEmployees) {
            InlineEditingEmployees = inlineEditingEmployees;
        }
        protected EditableEmployeesDataContext InlineEditingEmployees { get; }
        public IActionResult InlineEditing() {
            return PartialView("Editing/InlineEditing", InlineEditingEmployees.Get());
        }
        public IActionResult InsertRowInlineEditing(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    InlineEditingEmployees.Insert(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/InlineEditing", InlineEditingEmployees.Get());
        }
        public IActionResult UpdateRowInlineEditing(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    InlineEditingEmployees.Update(employee);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/InlineEditing", InlineEditingEmployees.Get());
        }
        public IActionResult DeleteRowInlineEditing(int id = -1) {
            if(ModelState.IsValid)
                try {
                    InlineEditingEmployees.Remove(id);
                } catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("Editing/InlineEditing", InlineEditingEmployees.Get());
        }
    }
}
using System;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace DevExpress.AspNetCore.Demos {
    public class EditableEmployee {
        public int ID { get; set; }
        [Required, MaxLength(20)]
        public string FirstName { get; set; }
        [Required, MaxLength(10)]
        public string LastName { get; set; }
        [MaxLength(30)]
        public string Title { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        [MaxLength(15)]
        public string City { get; set; }
        [MaxLength(15)]
        public string Country { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
    }
}
Screen Size
Color Themes
Demo QR Code