Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

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:

DevExpress_MVC_GridView_Inline_Edit

 

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:

DevExpress MVC GridView - Multiple Edit Modes

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.

DevExpress MVC GridView - Show Model Errors

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!

 

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

Published Apr 04 2011, 08:15 AM by
Bookmark and Share

Comments

Gosha

That's just great!

April 5, 2011 6:04 AM

Alaa Osta

Can't wait for release..

May 4, 2011 4:11 PM

David Doms

Any idea on when this will be released?  We've got an immediate need and would love to get our hands on these bits.

May 18, 2011 1:41 PM

Mehul Harry (DevExpress)

David,

If you have a DXperience subscription now then you can get the v2011.1 beta and test it now. Otherwise, the final 2011.1 release should be in a few weeks once the beta/alpha periods are over and we've knocked out the bugs. :)

Thanks.

May 25, 2011 4:33 AM

Kevin Quinn

Same question when will the devexpress mvc datagrid inline editing functionality be available?

June 6, 2011 6:00 AM

Mehul Harry (DevExpress)

Kevin,

The final v2011.1 release should be out very soon within the next few weeks or sooner. :)

Get the beta now with your DXperience subscription.

Thanks.

June 6, 2011 4:29 PM

Bhagawat Shinde 2

I need source code for this.

May 13, 2013 1:08 AM

Mehul Harry (DevExpress)

Bhagawat,

The source code for the demos is included with each DevExpress installation:

www.devexpress.com/.../DXperience

May 21, 2013 4:16 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners