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

Configure a command column to display data editing command items:

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

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);
        ...
    })
    .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; }
    }
}

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 parameter 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);
        ...
    })
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        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; }
    }
}

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 parameter 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);
        ...
    })
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        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; }
    }
}
Screen Size
Color Themes
Demo QR Code