Edit Modes
- 2 minutes to read
DevExpress MVC Tree List provides five built-in edit modes that allow end-users to manipulate tree view data. To specify one of these five modes, set the TreeListSettingsEditing.Mode property to one of the following values.
In-Line Data Editing (TreeListEditMode.Inline) - Allows user to edit cell values in the In-Line Edit Node when the Edit button is clicked. This mode allows you to modify the value directly in the cell.
Edit Form (TreeListEditMode.EditForm) - Allows users to edit cell values in the Edit Form when the Edit button is clicked. Each edit cell corresponds to a data column and permits its value to be edited.
Edit Form and Display Node (TreeListEditMode.EditFormAndDisplayNode) - This mode is similar to the Edit Form mode, but it displays the currently selected node above the edit form.
Popup Edit Form (TreeListEditMode.PopupEditForm) - Allows user to edit cell values in the Popup Edit Form. In this mode, the Tree List displays edit cells in the Edit Form within the popup.
Batch Editing (TreeListEditMode.Batch) - Allows user to modify a batch of tree list data on the client-side and to send it to the server in a single request. In this mode, the Tree List maintains all user changes on the client side until a user saves or discards them.
To allow end-users to manipulate tree list data in the edit modes mentioned above (except for the Batch Edit mode), add a Command Column to the TreeListSettings.Columns collection and specify which commands end-users can use. End-users can switch the TreeList to edit mode by clicking the Edit command. They can also use the server-side ASPxTreeList.StartEdit or client-side ASPxClientTreeList.StartEdit methods to switch to edit mode programmatically. To switch the Tree List back to browse mode and to save all the changes, click the Update command or use the ASPxTreeList.UpdateEdit method (ASPxClientTreeList.UpdateEdit). To discard the changes, click the Cancel command or use the ASPxTreeList.CancelEdit method (ASPxClientTreeList.CancelEdit).
Example
The code sample below demonstrates how to specify the edit mode for the ASP.NET MVC TreeList extension.
Partial View code:
@Html.DevExpress().TreeList(settings =>
{
settings.Name = "myTreeList";
settings.CallbackRouteValues = new { Controller = "Home", Action = "TreeListPartial" };
// Define the edit mode.
settings.SettingsEditing.Mode = TreeListEditingMode.EditFormAndDisplayRow;
// ...
}).Bind(Model).GetHtml()