Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Inline Editing

Is New
Has Attachment
CollapseEditNewDeleteDeveloper Express - RayNew Holiday Skin10/12/2007 01:49 PM
 CollapseEditNewDeleteSteven BuchananRe: New Holiday Skin10/12/2007 04:05 PM
   EditNewDeleteNancy DavolioRe: New Holiday Skin10/12/2007 04:07 PM
 CollapseEditNewDeleteJanet LeverlingRe: New Holiday Skin11/12/2007 12:42 PM
  CollapseEditNewDeleteMax V. Evseev (Developer Express)Re: New Holiday Skin12/12/2007 06:49 AM
    EditNewDeleteThomas HardyRe: New Holiday Skin12/12/2007 09:25 AM
    EditNewDeleteJanet LeverlingRe: New Holiday Skin12/12/2007 10:31 AM
   ExpandEditNewDeleteNancy DavolioRe: New Holiday Skin12/12/2007 02:20 PM
    EditNewDeleteLaura CallahanRe: New Holiday Skin15/12/2007 03:18 PM
 CollapseEditNewDeleteAnne DodsworthRe: New Holiday Skin13/12/2007 01:55 PM
   EditNewDeleteMargaret PeacockRe: New Holiday Skin15/12/2007 05:37 AM

This demo describes the TreeList extension inline edit mode. In this edit mode, cell values are edited within the in-line edit node.

For each allowed data operation (such as inserting, updating, deleting or node dragging), provide an associated controller action that will apply data changes to the Model and return the tree list's partial view. You can reference these controller actions by their names using the AddNewNodeRouteValues, UpdateNodeRouteValues, DeleteNodeRouteValues and NodeDragDropRouteValues properties. Note that node dragging is an editing operation, because while changing the node's position, its parent row identificator changes.

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

The TreeList 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 TreeList extension is placed inside the HTML <form> element (rendered via the Html.BeginForm helper). The Partial View with the TreeList 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.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxTreeListDemos