ASP.NET MVC Grid View - Inline, Popup And 2 More Edit Modes (available now in v2011.1)

Check out the new "Inline Editing" feature of our ASP.NET MVC GridView that's is available now in the DXperience v2011 volume 1 release:

Inline Edit

The "Inline Edit" feature of the DevExpress MVC GridView will allow your end-users to edit a data row direct within the GridView.

Your end-users can also use the keyboard to tab and edit the rows (check out the animated image above where I used the keyboard to move and edit between fields).

Since our MVC GridView's official introduction, the was one of the most requested features. And the DevExpress ASP.NET team has done a great job. Let's dive in to more details about this feature…

Multiple Edit Modes

In the image above, the editors are shown in "Inline" and "EditFormAndDisplay" mode.

The DevExpress MVC GridView gives you four edit modes to choose from:

The EditFormAndDisplayRow mode does 2 things:

1. Displays the original row being edited and
2. Intelligently draws the data editors in a 'form' style display for you

This mode still works like the straight inline mode but the editors are arranged in a better layout.

The EditForm mode is similar to EditFormAndDisplayRow but it doesn't show the original row that is being edited. Oh and there is also a PopupEditForm available too!

How's it work on the server-side?

For the upcoming "Inline Edit" feature, you'll need to create 3 actions and specify their routes:

var grid = Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "gvEditing";
        settings.KeyFieldName = "ProductID";
        settings.CallbackRouteValues = new { Controller = "GridView", Action = "InlineEditingPartial" };
        settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "GridView", Action = "InlineEditingAddNewPartial" };
        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "GridView", Action = "InlineEditingUpdatePartial" };
        settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "GridView", Action = "InlineEditingDeletePartial" };
        settings.SettingsEditing.Mode = GridViewEditingMode.Inline;
        settings.SettingsBehavior.ConfirmDelete = true;

Data binding and editing work differently in ASP.NET MVC. For the CRUD operations, you need to wire up your own action methods.

So the above 3 routes for Add, Update and Delete should be mapped to ActionMethods in your controller where you should perform all necessary data changes with the Model and return the GridView's partial view. For example:

public ActionResult InlineEditingPartial() {
    return PartialView("InlineEditingPartial", NorthwindDataProvider.GetEditableProducts());
}
[HttpPost]
public ActionResult InlineEditingAddNewPartial([ModelBinder(typeof(DevExpressEditorsBinder))] EditableProduct product) {
    if(ModelState.IsValid) {
        try {
            NorthwindDataProvider.UpdateProduct(product);
        }
        catch(Exception e) {
            ViewData["EditError"] = e.Message;
        }
    }
    else
        ViewData["EditError"] = "Please, correct all errors.";
    return PartialView("InlineEditingPartial", NorthwindDataProvider.GetEditableProducts());
}
[HttpPost]
public ActionResult InlineEditingUpdatePartial([ModelBinder(typeof(DevExpressEditorsBinder))] EditableProduct product) {
    if(ModelState.IsValid) {
        try {
            NorthwindDataProvider.UpdateProduct(product);
        }
        catch(Exception e) {
            ViewData["EditError"] = e.Message;
        }
    }
    else
        ViewData["EditError"] = "Please, correct all errors.";

    return PartialView("InlineEditingPartial", NorthwindDataProvider.GetEditableProducts());
}
[HttpPost]
public ActionResult InlineEditingDeletePartial(int productID) {
    if(productID > 0) {
        try {
            NorthwindDataProvider.DeleteProduct(productID);
        }
        catch(Exception e) {
            ViewData["EditError"] = e.Message;
        }
    }
    return PartialView("InlineEditingPartial", NorthwindDataProvider.GetEditableProducts());
}

Take a look at the Update and Insert action methods in the code block above. They both get the editing object using our DevExpressEditorsBinder object. This class helps you map a browser request to a data object. This class provides a DevExpress-specific implementation of a model binder. In fact, it derives from Microsoft's DefaultModelBinder class.

Also, notice in the Delete action method that you have access to the key value of the deleting row.

Built-In Error Management

If the Model is invalid during the update action then all errors will be shown next to the corresponding editors automatically. This setting is controlled by the GridViewSettings.SettingsEditing.ShowModelErrorsForEditors option which true is by default.

Also you can show common errors in the special row inside the grid's edit form if model is invalid or an error is occurred during data changes (see image above). To use the special row, set the GridViewExtension.SetEditErrorText method like this:

var grid = Html.DevExpress().GridView(
        settings =>
        {
          ...
        });
    if(ViewData["EditError"] != null)
        grid.SetEditErrorText((string)ViewData["EditError"]);
    grid.Bind(Model).Render();

Available Now!

The "Inline Edit" feature is available now in the DXperience v2011 volume 1 release.

What do you think of the new "Inline Editing" feature of the DevExpress MVC GridView Extension?

Drop me a line below with your thoughts or questions, thanks!

Free DevExpress Products - Get Your Copy Today