Edit Form

• Feb 02, 2023
• 4 minutes to read

This topic describes how to customize the Tree List edit form.

• Overview
• Customizing an Edit Form using Style Settings
• Customizing an Edit Form using Templates

Overview

Enable the data editing functionality and set the TreeListSettingsEditing.Mode (using TreeListSettings.SettingsEditing.Mode) property to TreeListEditMode.EditForm, TreeListEditMode.EditFormAndDisplayNode or TreeListEditMode.PopupEditForm to allow end-users to edit data using the built-in Edit Form.

 

The Edit Form displays edit cells that correspond to data columns and the Cancel/Update commands that allow end-users to discard changes or save them to a database.

The Edit Form displays editors and captions for all column displayed in the TreeList. Customize the Edit form layout using the edit cells settings (TreeListColumnEditFormSettings) that allow you to specify the edit cell’s caption text, visibility and position within the form. The default layout is generated automatically. Use the TreeListSettings.SetEditFormTemplateContent method to define a custom edit cell template’s content.

The following table lists the edit cell’s settings:

Property	Description
TreeListColumnEditFormSettings.CaptionLocation	Specifies the column caption’s location.
TreeListColumnEditFormSettings.Visible	Specifies the edit cell’s visibility. If this property is set to ‘Default’, the edit cell’s visibility depends on its data column’s visibility.
TreeListColumnEditFormSettings.VisibleIndex	Specifies the edit cell’s position in the Edit Form.
TreeListColumnEditFormSettings.ColumnSpan	Specifies the number of edit form columns the cell occupies.
TreeListColumnEditFormSettings.RowSpan	Specifies the number of edit form rows the edit cell occupies.

Use the column’s TreeListDataColumn.EditFormSettings property to access these settings.

Customizing an Edit Form using Style Settings

Use the TreeListStyles.CommandCell property (using TreeListSettings.Styles.CommandCell) to customize command cells by applying the command column’s style settings, as shown in the code sample below.

Razor

@{
    var treeList = Html.DevExpress().TreeList(settings =>
    {
        settings.Name = "myTreeList";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "TreeListPartial" };

        settings.SettingsEditing.AddNewNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialAddNew" };
        settings.SettingsEditing.UpdateNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialUpdate" };
        settings.SettingsEditing.DeleteNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialDelete" };
        settings.SettingsEditing.Mode = TreeListEditMode.EditFormAndDisplayNode;

        // ...

        settings.Styles.EditForm.BackColor = System.Drawing.Color.FromArgb(242, 242, 242);
        settings.Styles.EditFormDisplayNode.BackColor = System.Drawing.Color.FromArgb(245, 245, 245);
    });
    if (ViewBag.EditError != null)
    {
        treeList.SetEditErrorText(ViewBag.EditError);
    }
}
@treeList.Bind(Model).GetHtml()

The image below illustrates the result.

Customizing an Edit Form using Templates

The TreeList provides the TreeListSettings.SetEditFormTemplateContent method to define a custom edit cell template’s content. This allows you to change the edit form’s layout.

The code sample below demonstrates how to define the edit form’s template. In this example, the tree list organizes all data editors in a single column using the FormLayout extension. The FormLayout automatically adds the required fields’ required marks to the captions.

Partial View code (“TreeListPartial”):

Razor

@{
    var treeList = Html.DevExpress().TreeList(settings =>
    {
        settings.Name = "myTreeList";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "TreeListPartial" };

        // ... 
        settings.KeyFieldName = "CustomerID";
        settings.Columns.Add("CompanyName");
        settings.Columns.Add("ContactName");
        settings.Columns.Add("ContactTitle");
        settings.Columns.Add("Phone");
        // Define the template for rendering the edit form. 
        settings.SetEditFormTemplateContent(c =>
        {
            Html.RenderAction("EditFormPartial", new { currentCustomerID = c.KeyValue.ToString()} );
        });
    if (ViewBag.EditError != null)
    {
        treeList.SetEditErrorText(ViewBag.EditError);
    }
}
@treeList.Bind(Model).GetHtml()

Controller code (“HomeController”):

C#

...
using MyProject.Models;

namespace MyProject.Controllers
{
    public class HomeController : Controller
    {
        // ...
        MyProject.Models.northwndEntities db = new MyProject.Models.northwndEntities();

        // Returns the partial view that contains an edit form bound to the edited item.
        public ActionResult EditFormPartial(String currentCustomerID)
        {
            var model = db.Customers;
            var item = model.FirstOrDefault(it => it.CustomerID == currentCustomerID);
            return PartialView("_EditFormPartial", item);
        }
    }
}

Edit form partial View (“_EditFormPartial”):

Razor

@model BatchEditBug.Models.Customer

@Html.DevExpress().FormLayout(settings => {
    settings.Name = "FormLayout";

    settings.SettingsItems.ShowCaption = DefaultBoolean.True;
    settings.SettingsItemCaptions.Location = LayoutItemCaptionLocation.Left;

    settings.Items.Add(m => m.CompanyName, s => {
        s.HelpText = "Enter the company name"; 
        s.Caption = "Company";
    });
    settings.Items.Add(m => m.ContactName, s => {
        s.HelpText = "Enter the contact name";
        s.Caption = "Contact";
    });
    settings.Items.Add(m => m.ContactTitle, s => {
        s.HelpText = "Enter the contact position";
        s.Caption = "Contact Title";
    });
    settings.Items.Add(m => m.Phone).HelpText = "Enter the phone number";

    settings.Items.AddGroupItem(group =>
    {
        group.GroupBoxDecoration = GroupBoxDecoration.None;
        group.ColumnCount = 2;
        group.Items.Add(i =>
        {
            i.ShowCaption = DefaultBoolean.False;
            i.NestedExtensionType = FormLayoutNestedExtensionItemType.Button;
            var button = (ButtonSettings)i.NestedExtensionSettings;
            button.Name = "cancel";
            button.Text = "Cancel";
            button.ClientSideEvents.Click = "function (s,e) {myTreeList.CancelEdit();}";
        });
        group.Items.Add(i =>
        {
            i.ShowCaption = DefaultBoolean.False;
            i.NestedExtensionType = FormLayoutNestedExtensionItemType.Button;
            var button = (ButtonSettings)i.NestedExtensionSettings;
            button.Name = "update";
            button.Text = "Update";
            button.ClientSideEvents.Click = "function (s,e) {myTreeList.UpdateEdit();}";
        });
    });
}).GetHtml()