Grid View - Editing Edit Modes

#
Product Name
Category
Quantity Per Unit
Unit Price
Units In Stock
Discontinued
EditNewDeleteChaiBeverages10 boxes x 20 bags$18.0039
 ChangBeverages24 - 12 oz bottles$19.0017
v
-
+
-
+
+
-
UpdateCancel
EditNewDeleteAniseed SyrupCondiments12 - 550 ml bottles$10.0013
EditNewDeleteChef Anton's Cajun SeasoningCondiments48 - 6 oz jars$22.0053
EditNewDeleteChef Anton's Gumbo MixCondiments36 boxes$21.350
EditNewDeleteGrandma's Boysenberry SpreadCondiments12 - 8 oz jars$25.00120
EditNewDeleteUncle Bob's Organic Dried PearsProduce12 - 1 lb pkgs.$30.0015
EditNewDeleteNorthwoods Cranberry SauceCondiments12 - 12 oz jars$40.006
EditNewDeleteMishi Kobe NikuMeat/Poultry18 - 500 g pkgs.$97.0029
EditNewDeleteIkuraSeafood12 - 200 ml jars$31.0031
Page 1 of 8 (77 items)Prev12345678Next

This demo illustrates the Grid View's built-in data editing functionality.

To enable data editing operations, the grid's KeyFieldName property must be specified. For each allowed data operation (such as inserting, updating or deleting), provide an associated controller action that will apply data changes to Model and return the grid's partial view. You can reference these controller actions by their names using the SettingsEditing.AddNewRowRouteValues, SettingsEditing.UpdateRowRouteValues, and SettingsEditing.DeleteRowRouteValues properties. Note that in actions that handle update and insert operations, you can obtain the edited object using our specific DevExpressEditorsBinder model binder. In the actions handling delete operations, you can get the key value of the deleted row.

To allow end-users to manipulate grid data, add a command column to the grid's column collection and specify which commands (New, Edit, Delete, Update, Cancel) can be used by end-users. To switch a grid row to edit mode, end-users should be allowed to click the Edit command.

The following list highlights built-in edit modes available for the Grid View, from the simplest to the most sophisticated (use the grid's SettingsEditing.Mode property to specify edit mode):

  • In-Cell Editing

    When a row is switched to edit mode, its cells display appropriate editors.

  • Edit Form

    When a row is switched to edit mode, an edit form appears under or instead of the edited row.

    Edit Form displays label-editor pairs that correspond to data columns, and the Update/Cancel commands that allow end-users to save or discard the changes made. The EditFormSettings property of data columns contains different settings to arrange label-editor pairs. This provides you with a flexible data editor arrangement mechanism. The default layout of the Edit Form is generated automatically.

  • Popup Edit Form

    When a row is switched to edit mode, Edit Form is displayed as a popup window, which can be dragged and used in modal mode, if required.

The GridView validates user-input on the client-side based on the data annotation attributes of your Model. This approach is also called unobtrusive client validation. To enable the unobtrusive validation, the partial View with the GridView extension is placed inside the HTML <form> element (rendered via the Html.BeginForm helper). The Partial View with the GridView extension contains two helpers that enable the unobtrusive client validation: Html.EnableClientValidation and Html.EnableUnobtrusiveJavaScript.

An error is displayed next to the individual form editors. However, an additional error message can be displayed below the edit form using the SetEditErrorText method.

Version: v2014 vol 2.3
Copyright © 2006-2014 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.