Overview - TreeList

• Aug 01, 2019
• 2 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.