Tree List

• Feb 09, 2022
• 4 minutes to read

The TreeList is a multi-purpose data visualization system that can display information as a TREE, a GRID, or a combination of both - in either a data bound or unbound mode.

To learn more about the TreeList and see it in action, refer to its online demos.

Implementation Details

The TreeList is realized by the TreeListExtension class. Its instance can be accessed via the ExtensionsFactory.TreeList helper method, which is used to add a TreeList extension to a view. This method’s parameter provides access to the TreeList‘s settings implemented by the TreeListSettings class, allowing you to fully customize the extension.

The TreeList‘s client counterpart is represented by the MVCxClientTreeList object.

Declaration

The TreeList can be added to a view in the following manner.

View code (Razor):

C#

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

        settings.AutoGenerateColumns = false;
        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);

        settings.Columns.Add("title", "Page Title");

        settings.SettingsBehavior.ExpandCollapseAction = TreeListExpandCollapseAction.NodeDblClick;

        settings.PreRender = (sender, e) => {
            ((MVCxTreeList)sender).ExpandToLevel(1);
        };
    }
).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/SiteMap.xml"), "/*/*/*").GetHtml()

Controller code:

C#

using System.Web.Mvc;
using DevExpress.Web.Mvc;

namespace MyMvcApplication.Controllers {
    public partial class TreeListController : Controller {
        public ActionResult DataBindingToXML() {
            return View("DataBindingToXML");
        }
    }
}

The result is demonstrated in the image below.

Main Features

Data Specifics

• Binding to Data - The TreeList can be easily populated with data by binding to any standard data source type. You can also bind the TreeList to any object that represents a tree structure, or manually create a tree in code. See demo.
• Virtual Mode - The TreeList can operate in a Virtual Mode. This mode can be useful when binding to large data sets. In a virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded. See demo.

Data Shaping and Manipulation

• Full Data Summaries - The TreeList enables you to calculate summary values for all values within a column or within a group of nodes, and display the result inside footer cells. The TreeList provides five built-in aggregate functions (count, max, min, etc.) and events to manually implement custom aggregate functions. See demo.
• Preview Nodes - With preview rows, you can let your end-users view large text or memo fields directly in the TreeList, without the need to open an external editor or drop-down window. See demo.
• Runtime Column Customization - End-users can manage the layout of tree list columns by rearranging, adding and removing columns, using drag and drop. See demo.
• Multiple Node Selection - The TreeList supports single and multiple node selection. See demo.

Focus and Navigation

• Built-in Pager - The TreeList can automatically split content across multiple pages, and provide the built-in pager that enables end-users to navigate through data.
• Nodes Iterator - Allows you to avoid writing recursive code to visit all the nodes contained within the TreeList. It makes traversing through the nodes a trivial task.

Appearance Customization

• Appearances - A powerful mechanism for controling the entire look and feel of the tree list. You can customize the appearance of almost any visual element of the TreeList and even apply them conditionally to reflect certain states, such as errors. In addition, the TreeList ships with a number of predefined themes.
• Templates Technology - Templates are fully supported. For each element inside the TreeList, you can completely customize the appearance or layout using any HTML or server-side extension. See demo.
• Full CSS Support - The TreeList’s appearance can be customized using CSS classes. This approach is best when you need centralized control over the appearance of several MVC extensions or the entire site.

Miscellaneous

• Partial Update - This feature decreases your page load time. Only a portion of the TreeList control is updated, without a full client screen refresh.
• Cross-Browser Compatibility - Mozilla Firefox, Google Chrome, Opera, etc. The TreeList control is cross-browser compatible.
• Rich Client-Side Functionality - A comprehensive client-side API is available for the TreeList.
• Client-Side Events - The TreeList exposes a rich set of client-side events. These events are executed on the client side, and have been engineered to maximize performance.
• Cookies Support - The TreeList control fully supports cookies, allowing your site’s visitors to personalize pages as needed. If cookies are enabled, every possible end-user customization option is saved, and then restored in future sessions.
• AJAX and jQuery Support.