DxTreeView Class

A navigation control that displays items as a tree.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxTreeView :
    DxComponent,
    IRequireSelfCascading,
    IModelWrapper<ITreeViewModel>

Remarks

The DevExpress TreeView component for Blazor (<DxTreeView>) displays hierarchical data structures within a tree-like UI. The component implements navigation within a web application.

Run Demo: TreeView

Add a TreeView to a Project

Follow the steps below to add the TreeView component to an application:

Create a Blazor Server or Blazor WebAssembly application.
Add the <DxTreeView></DxTreeView> markup to a .razor file.
Configure the component: add nodes or bind the TreeView to data, handle expand/collapse events, enable node selection, and so on (see the sections below).

API Reference

Refer to the following list for the component API reference: DxTreeView Members.

Add Nodes (Unbound Mode)

In unbound mode, you should create a node hierarchy in the markup. A DxTreeViewNode class instance implements a node. The DxTreeView.Nodes collection declares root nodes. Each node can have its own collection of child nodes – DxTreeViewNode.Nodes.

For each node, you can specify the following settings:

NameSpecifies the unique identifier name for the current node.TextSpecifies the node text content.IconCssClassSpecifies the CSS class of the icon displayed by the node.NavigateUrlSpecifies the navigation location for the node.

razor

<DxTreeView>
  <Nodes>
    <DxTreeViewNode Name="Overview" Text="Overview" NavigateUrl="https://demos.devexpress.com/blazor/" />
    <DxTreeViewNode Name="Editors" Text="Data Editors" Expanded="true">
      <Nodes>
        <DxTreeViewNode Text="Combobox" NavigateUrl="https://demos.devexpress.com/blazor/ComboBox" />
        <DxTreeViewNode Text="Spin Edit" NavigateUrl="https://demos.devexpress.com/blazor/SpinEdit" />
      </Nodes>
    </DxTreeViewNode>
    <DxTreeViewNode Name="FormLayout" Text="Form Layout" BadgeText="Upd" 
                    NavigateUrl="https://demos.devexpress.com/blazor/FormLayout" />
    <DxTreeViewNode Name="TreeView" Text="TreeView" BadgeText="New"
                    NavigateUrl="https://demos.devexpress.com/blazor/TreeView" />
  </Nodes>
</DxTreeView>

Bind to Data (Bound Mode)

You can populate the TreeView component with items from a data source.

Follow the steps below to bind TreeView to data:

Use the Data property to specify a data source. You can use different collection types:
Add the DataMappings tag to the component’s markup.
Create the DxTreeViewDataMapping instance and map node properties (HasChildren, IconCssClass, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

Flat Data

The following code snippet binds TreeView to a collection of flat data items. It specifies mappings for Text, Key, and ParentKey properties.

Razor
ChemicalElement.cs
ChemicalElements.cs

razor

<DxTreeView Data="@ChemicalElements.Groups">
    <DataMappings>
        <DxTreeViewDataMapping Text="Name" Key="Name" ParentKey="CategoryName" />
    </DataMappings>
</DxTreeView>

csharp

public class ChemicalElement {
    public string Name { get; set; }
    public string CategoryName { get; set; }
}

csharp

public static class ChemicalElements {
    private static readonly Lazy<List<ChemicalElement>> groups = new Lazy<List<ChemicalElement>>(() => {
        return new List<ChemicalElement>() {
            new ChemicalElement() { Name = "Metals", CategoryName = null },
            new ChemicalElement() { Name = "Alkali metals", CategoryName = "Metals" },
            new ChemicalElement() { Name = "Alkaline earth metals", CategoryName = "Metals" },
            new ChemicalElement() { Name = "Inner transition elements", CategoryName = "Metals" },
            new ChemicalElement() { Name = "Lanthanides", CategoryName = "Inner transition elements" },
            new ChemicalElement() { Name = "Actinides", CategoryName = "Inner transition elements" },
            new ChemicalElement() { Name = "Transition elements", CategoryName = "Metals" },
            new ChemicalElement() { Name = "Other metals", CategoryName = "Metals" },
            new ChemicalElement() { Name = "Metalloids", CategoryName = null },
            new ChemicalElement() { Name = "Nonmetals", CategoryName = null },
            new ChemicalElement() { Name = "Halogens", CategoryName = "Nonmetals" },
            new ChemicalElement() { Name = "Noble gases", CategoryName = "Nonmetals" },
            new ChemicalElement() { Name = "Other nonmetals", CategoryName = "Nonmetals" },
        };
    });
    public static List<ChemicalElement> Groups { get { return groups.Value; } }
}

Run Demo: TreeView - Binding to Flat Data

Note

When DxTreeView binds to flat data, it reserves a ParentKey equal to 0 for root items. If a data item’s Key is also 0, the TreeView cannot build the hierarchy and fails to render. Use non‑zero Key values, or explicitly set ParentKey to a value that never appears in Key (for example, -1) to avoid conflicts.

Hierarchical Data

The following code snippet binds TreeView to a collection of hierarchical data items. The code specifies Children and Text mappings to adjust the TreeView data model to the specified data source.

Razor
ChemicalElementGroup.cs
ChemicalElements.cs

razor

<DxTreeView Data="@ChemicalElements.Groups">
    <DataMappings>
        <DxTreeViewDataMapping Text="Name" Children="Groups" />
    </DataMappings>
</DxTreeView>

csharp

public class ChemicalElementGroup {
    readonly Lazy<List<ChemicalElementGroup>> _groups = new Lazy<List<ChemicalElementGroup>>();

    public ChemicalElementGroup(string name, List<ChemicalElementGroup> groups = null) {
        Name = name;
        if (groups != null)
            Groups.AddRange(groups);
    }
    public string Name { get; set; }

    public List<ChemicalElementGroup> Groups { get { return _groups.Value; } }
}

csharp

public static class ChemicalElements {
    private static readonly Lazy<List<ChemicalElementGroup>> chemicalElementGroups = new Lazy<List<ChemicalElementGroup>>(() => {
        List<ChemicalElementGroup> groups = new List<ChemicalElementGroup>() {
            new ChemicalElementGroup("Metals", new List<ChemicalElementGroup>() {
                new ChemicalElementGroup("Alkali metals"),
                new ChemicalElementGroup("Alkaline earth metals"),
                new ChemicalElementGroup("Inner transition elements", new List<ChemicalElementGroup>() {
                    new ChemicalElementGroup("Lanthanides"),
                    new ChemicalElementGroup("Actinides")
                }),
                new ChemicalElementGroup("Transition elements"),
                new ChemicalElementGroup("Other metals")
            }),
            new ChemicalElementGroup("Metalloids"),
            new ChemicalElementGroup("Nonmetals", new List<ChemicalElementGroup>() {
                new ChemicalElementGroup("Halogens"),
                new ChemicalElementGroup("Noble gases"),
                new ChemicalElementGroup("Other nonmetals")
            })
        };
        return groups;
    });

    public static List<ChemicalElementGroup> Groups { get { return chemicalElementGroups.Value; } }
}

Note

A data item’s Key must not equal its ParentKey. A self-reference breaks the hierarchy and blocks rendering.

Run Demo: TreeView - Binding to Hierarchical Data

YouTube video

Static Render Mode Specifics

In static render mode, nodes cannot be expanded or collapsed. Use a single-level tree view or set a parent node’s Expanded property to true to display an initially expanded tree.

razor

<DxTreeView>
    <Nodes>
        <DxTreeViewNode Name="Overview" Text="Overview" NavigateUrl="https://demos.devexpress.com/blazor/" />
        <DxTreeViewNode Name="Editors" Text="Data Editors" Expanded="true">
            <Nodes>
                <DxTreeViewNode Text="Combobox" NavigateUrl="https://demos.devexpress.com/blazor/ComboBox" />
                <DxTreeViewNode Text="Spin Edit" NavigateUrl="https://demos.devexpress.com/blazor/SpinEdit" />
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Name="FormLayout" Text="Form Layout" NavigateUrl="https://demos.devexpress.com/blazor/FormLayout" />
        <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="https://demos.devexpress.com/blazor/TreeView" />
    </Nodes>
</DxTreeView>

If you need interactivity, enable interactive render mode. Refer to the following topic for more details: Enable Interactive Render Mode.

Load Child Nodes on Demand

When the LoadChildNodesOnDemand option is set to true, the component does not load child nodes until the parent node is expanded for the first time. Use this option to optimize component performance when it is bound to a large data source.

You can load child nodes on demand in either bound or unbound mode. Note that bound mode works with hierarchical structures only and requires the HasChildren property. The component uses this property to determine how to render nodes before they are expanded for the first time (for example, whether expand buttons should appear).

Razor
DateTimeGroup.cs

razor

<DxTreeView @ref="@treeView"
            CssClass="cw-480"
            Data="@DataSource"
            LoadChildNodesOnDemand="true"
            @* ... *@
            AnimationType="LayoutAnimationType.Slide">
    <DataMappings>
        <DxTreeViewDataMapping HasChildren="@(nameof(DateTimeGroup.HasSubGroups))"
                               Children="@(nameof(DateTimeGroup.SubGroups))"
                               Text="@(nameof(DateTimeGroup.Title))"/>
    </DataMappings>
</DxTreeView>

@code {
    DxTreeView treeView;

    IEnumerable<DateTimeGroup> DataSource = new List<DateTimeGroup>() {
        new DateTimeGroup(new DateTime(DateTime.Now.Year, 1, 1), DateTimeGroupType.Year)
    };

    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {
            var todayDate = DateTime.Now;
            treeView.SetNodeExpanded(n => n.Text == todayDate.Year.ToString(), true);
        }
        base.OnAfterRender(firstRender);
    }
}

csharp

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;

namespace BlazorDemo.Data {
    public enum DateTimeGroupType { Year, Month, Week, Day }

    public class DateTimeGroup {
        public DateTimeGroup(DateTime dateTime, DateTimeGroupType groupType) {
            DateTime = dateTime;
            GroupType = groupType;
        }

        public DateTime DateTime { get; private set; }
        public DateTimeGroupType GroupType { get; private set; }
        public string Title {
            get {
                switch(GroupType) {
                    case DateTimeGroupType.Year:
                        return DateTime.ToString("yyyy");
                    case DateTimeGroupType.Month:
                        return DateTime.ToString("MMMM");
                    case DateTimeGroupType.Week:
                        var culture = CultureInfo.CurrentCulture;
                        var weekNumber = culture.Calendar.GetWeekOfYear(DateTime,
                            culture.DateTimeFormat.CalendarWeekRule,
                            culture.DateTimeFormat.FirstDayOfWeek);
                        var weekStartDate = DateTimeUtils.GetWeekStart(DateTime);
                        var weekEndDate = weekStartDate.AddDays(6);
                        var formatString = weekStartDate.Year == weekEndDate.Year ? "MMMM d" : "MMMM d, yyyy";
                        return String.Format("Week {0} ({1} - {2})", weekNumber,
                            weekStartDate.ToString(formatString), weekEndDate.ToString(formatString));
                    case DateTimeGroupType.Day:
                        return DateTime.ToString("dddd, MMMM d");
                    default:
                        return "";
                }
            }
        }
        public bool HasSubGroups => GroupType < DateTimeGroupType.Day;
        IEnumerable<DateTimeGroup> subGroups;
        public IEnumerable<DateTimeGroup> SubGroups => subGroups ??= GetSubGroups();
        public IEnumerable<DateTimeGroup> GetSubGroups() {
            switch(GroupType) {
                case DateTimeGroupType.Year:
                    return Enumerable.Range(1, 12)
                        .Select(m => new DateTimeGroup(new DateTime(DateTime.Year, m, 1), DateTimeGroupType.Month))
                        .ToList();
                case DateTimeGroupType.Month:
                    var firstDayOfMonth = DateTime;
                    var weekOffset = firstDayOfMonth.Month > 1 ? firstDayOfMonth.DayOfWeek - CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek : 0;
                    var day = firstDayOfMonth.AddDays(-weekOffset);
                    var nextMonthFirstDay = DateTime.AddMonths(1);
                    var monthWeeks = new List<DateTimeGroup>();
                    while(day < nextMonthFirstDay) {
                        monthWeeks.Add(new DateTimeGroup(day.Month == firstDayOfMonth.Month ? day : firstDayOfMonth, DateTimeGroupType.Week));
                        for(int i = 0; i < 7; i++)
                            day = day.AddDays(1);
                    }
                    return monthWeeks;
                case DateTimeGroupType.Week:
                    var firstDayOfWeek = DateTimeUtils.GetWeekStart(DateTime);
                    var dayOfWeek = firstDayOfWeek;
                    var weekDays = new List<DateTimeGroup>();
                    for(int i = 0; i < 7; i++) {
                        if(dayOfWeek.Year == DateTime.Year && dayOfWeek.Month == DateTime.Month)
                            weekDays.Add(new DateTimeGroup(dayOfWeek, DateTimeGroupType.Day));
                        dayOfWeek = dayOfWeek.AddDays(1);
                    }
                    return weekDays;
                default:
                    return null;
            }
        }
    }
}

Refer to the following section for information about limitations: Load Child Nodes on Demand - Limitations.

Run Demo: TreeView - Load Child Nodes on Demand Mode

View Example: TreeView for Blazor - How to load child nodes on demand (lazy loading)

Expand and Collapse Nodes

To expand or collapse a node, users can click or double-click it, or click its expand button.

The following code snippet shows a TreeView with custom Expand buttons.

The table below lists related API members:

Member

Description

| | --- | --- | |

NodeExpandCollapseAction

Specifies user actions that expand or collapse a node.

| |

ShowExpandButtons

Specifies whether expand buttons are visible.

| |

SetNodeExpanded(Func<ITreeViewNodeInfo, Boolean>, Boolean)

Expands or collapses the specified node.

| |

GetNodeExpanded(Func<ITreeViewNodeInfo, Boolean>)

Returns whether the specified node is expanded.

| |

ExpandToNode(Func<ITreeViewNodeInfo, Boolean>)

Expands the nodes down to the specified node.

| |

ExpandAll()

Expands all nodes in the DxTreeView.

| |

CollapseAll()

Collapses all nodes in the DxTreeView.

| |

ExpandButtonIconCssClass

Specify a CSS class for the expand button’s icon.

| |

CollapseButtonIconCssClass

Specify a CSS class for the collapse button’s icon.

The following events fire when the state of a node changes:

Member

Description

| | --- | --- | |

BeforeExpand

Fires when a node is about to be expanded and allows you to cancel the action.

| |

BeforeCollapse

Fires when a node is about to be collapsed and allows you to cancel the action.

| |

AfterExpand

Fires after a node has been expanded.

| |

AfterCollapse

Fires after a node has been collapsed.

| |

ExpandedChanged

Fires when a TreeView’s node expands or collapses.

Filter Nodes

Enable the ShowFilterPanel option to activate the filter panel. If a user types in a search string, the component displays matching nodes, and optionally, their parent/child nodes. Note that if you activate the filter option with the enabled LoadChildNodesOnDemand option, the component loads all its nodes into memory.

razor

<DxTreeView ShowFilterPanel="true">
    @* ... *@
</DxTreeView>

Use the FilterMode property to specify how the component displays the filter operation results. The following options are available:

EntireBranchThe component displays a node that meets the filter criteria and all its parent and child nodes, even if they do not meet the criteria.ParentBranchThe component displays a node that meets the filter criteria and all its parent nodes, even if they do not meet the criteria.NodesThe component displays only nodes that meet the filter criteria. A node at the hierarchy’s highest level that meets the filter criteria becomes the root node. The node’s child nodes that meet the filter criteria move to the upper hierarchy levels.

The table below lists available API members:

Member

Description

| | --- | --- | |

FilterMinLength

Specifies the minimum number of characters a user must type in the search box to apply the filter.

| |

CustomFilter

Allows you to implement custom filter logic.

| |

FilterString

Specifies the filter criteria used to filter the component’s nodes.

View Example: Implement Custom Filter

Select Nodes

Set the AllowSelectNodes property to true to enable node selection. Once a user clicks a node, it is highlighted and the SelectionChanged event is raised. The following example handles this event to expand the selected node (if it has children) and to collapse other nodes:

razor

<DxTreeView @ref="@treeView" AllowSelectNodes="true" SelectionChanged="@SelectionChanged">
  ...
</DxTreeView>

@code {
    DxTreeView treeView;

    protected void SelectionChanged(TreeViewNodeEventArgs e) {
        treeView.CollapseAll();
        treeView.ExpandToNode((n) => n.Text == e.NodeInfo.Text);
        if (!e.NodeInfo.IsLeaf) {
          treeView.SetNodeExpanded((n) => n.Text == e.NodeInfo.Text, true);
        }    
    }
}

Run Demo: TreeView - Node Selection

Refer to the list below for other related API members:

AllowSelectionSpecifies whether the TreeView node can be selected.GetSelectedNodeInfo()Returns information about the selected node.SelectNode(Func<ITreeViewNodeInfo, Boolean>)Selects the specified node.ClearSelection()Clears node selection.

Check Nodes

Set the CheckMode property to Multiple or Recursive to display checkboxes in nodes. The CheckedChanged event is raised when a user changes a node’s check state.

The NavigationCheckedChangedEventArgs<TInfo> class contains the following collections:

CheckedItemsReturns all checked items.LastCheckedItemsReturns items checked during the last operation.LastUncheckedItemsReturns items unchecked during the last operation.

Run Demo: Checking Multiple Nodes Run Demo: Recursive Node Check Marks

The following code snippet handles the CheckedChanged event to respond to user interactions with node checkboxes. The handler obtains the collection of nodes whose state is checked. If the collection is not empty, the code displays the first node’s text.

razor

First checked node: @FirstChecked

<DxTreeView Data="@Data"
            CheckMode="TreeViewCheckMode.Recursive"
            CheckedChanged="CheckedChanged">
    <DataMappings>
        <DxTreeViewDataMapping Text="Name"
                               Key="Id"
                               ParentKey="CategoryId" />
    </DataMappings>
</DxTreeView>

@code {
    string? FirstChecked = "none";
    void CheckedChanged(TreeViewCheckedChangedEventArgs e) {
        var firstCheckedNode = e.CheckedItems.FirstOrDefault();
        FirstChecked = firstCheckedNode != null ? firstCheckedNode.Text : "none";
    }
}

Set the DxTreeViewNode.AllowCheck property to false to prevent users from checking a specific node.

Note

The following actions change the check state of all nodes, even those that do not meet the applied filter criteria:

CheckAll() method call
ClearCheck() method call
Recursive check mode update

Refer to the list below for other related API members:

CheckedSpecifies whether the node is checked.CheckAll()Checks all nodes in the TreeView.CheckAllVisibleSpecifies whether the Check All box is visible.CheckAllTextSpecifies the label of the Check All box.ClearCheck()Unchecks all nodes.CheckNodeByClickSpecifies whether users can click nodes to check and uncheck them.

Use the NavigateUrl property to specify a URL where the client web browser navigates when a node is clicked. The DxTreeView.Target property specifies the common target attribute’s value for all nodes in the TreeView. To override the attribute value for a specific node, use the DxTreeViewNode.Target property.

The following code snippet sets the common target attribute’s value for all nodes to _blank and overrides this value for the first node (sets it to _self explicitly).

razor

<DxTreeView Target="_blank">
    <Nodes>
        <DxTreeViewNode Name="Overview" 
                        Text="Overview" 
                        NavigateUrl="https://demos.devexpress.com/blazor/" 
                        Target="_self"/>
        <DxTreeViewNode Name="Editors" Text="Data Editors" Expanded="true">
            <Nodes>
                <DxTreeViewNode Text="Combobox" NavigateUrl="https://demos.devexpress.com/blazor/ComboBox" />
                <DxTreeViewNode Text="Spin Edit" NavigateUrl="https://demos.devexpress.com/blazor/SpinEdit" />
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

The item becomes selected if its DxTreeViewNode.NavigateUrl property value matches the active web page. If the control does select the item, it expands all parent items. Set the AllowSelectNodes property value to true to enable this functionality.

The following example disables URL synchronization:

razor

<DxTreeView AllowSelectNodes="true" UrlMatchMode="NavigationUrlMatchMode.None">
    <Nodes>
        <DxTreeViewNode NavigateUrl="./" Text="Overview"></DxTreeViewNode>
        <DxTreeViewNode NavigateUrl="grid" Text="Grid"></DxTreeViewNode>
    </Nodes>
</DxTreeView>

Load Child Nodes on Demand Mode and Node Selection

If the AllowSelectNodes property is set to true and a user navigates to a URL associated with a TreeView node, the component select this node. If the LoadChildNodesOnDemand property is true, the component applies proper selection only if a user has already loaded that node (expanded all its parent nodes).

The following code snippet demonstrates a TreeView with the enabled LoadChildNodesOnDemand property. When a user opens the https://localhost:44348/sortdata URL, the Sort Data node is not selected.

razor

<DxTreeView CssClass="app-sidebar" AllowSelectNodes="true" LoadChildNodesOnDemand="true">
    <Nodes>
        <DxTreeViewNode Text="Grid">
            <Nodes>
                <DxTreeViewNode NavigateUrl="sortdata" Text="Sort Data"></DxTreeViewNode>
                <DxTreeViewNode NavigateUrl="groupdata" Text="Group Data"></DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Text="Scheduler">
            <Nodes>
                <DxTreeViewNode NavigateUrl="viewtypes" Text="View Types"></DxTreeViewNode>
                <DxTreeViewNode NavigateUrl="resources" Text="Resources"></DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

The image below shows selection with the disabled LoadChildNodesOnDemand mode:

You can also use the DxTreeView.UrlMatchMode and DxTreeViewNode.UrlMatchMode properties to specify how the TreeView component matches the browser URL and node’s NavigateUrl property.

Apply Customizations

Disable User Interactions

Set the Enabled property to false to ignore user interactions.

razor

<button type="button" @onclick="@(() => ToggleTreeViewEnabled())">Enable/Disable TreeView</button>

<DxTreeView Enabled="@TreeViewEnabled">
    <Nodes>
        <DxTreeViewNode Text="Metals">
            <Nodes>
                <DxTreeViewNode Text="Alkali metals" />
                <DxTreeViewNode Text="Inner transition elements">
                    <Nodes>
                        <DxTreeViewNode Text="Lanthanides" />
                        <DxTreeViewNode Text="Actinides" />
                    </Nodes>
                </DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

@code {
    bool TreeViewEnabled { get; set; } = false;

    void ToggleTreeViewEnabled() { TreeViewEnabled = !TreeViewEnabled; }
}

Add a Vertical Scrollbar

The TreeView component automatically displays a vertical scrollbar when its nodes do not fit the viewport:

Razor
CSS

razor

<div>
    <DxTreeView CssClass="my-treeview">
        <Nodes>
            <DxTreeViewNode Text="Data Editors" />
            <DxTreeViewNode Text="Data Grid">
                <Nodes>
                    <DxTreeViewNode Text="Editing" />
                    <DxTreeViewNode Text="Sorting" />
                    <DxTreeViewNode Text="Export" />
                </Nodes>
            </DxTreeViewNode>
            <DxTreeViewNode Text="Rich Text Editor" />
            <DxTreeViewNode Text="Scheduler" />
            <DxTreeViewNode Text="Navigation" />
        </Nodes>
    </DxTreeView>
</div>

css

.my-treeview {
    height: 180px;
}

Wrap Node Text

If a Text value does not fit into a node as a single line, the node displays multiple lines of text. Set the TextWrapEnabled property to false to disable word wrap and trim extra words:

Razor
CSS

razor

<div class="container">
    <DxTreeView TextWrapEnabled="false">
        <Nodes>
            <DxTreeViewNode Text="Data Binding">
                <Nodes>
                    <DxTreeViewNode Text="Large Data (Instant Feedback Source)" />
                    <DxTreeViewNode Text="Large Data (Queryable)" />
                    <DxTreeViewNode Text="Unbound Columns" />
                </Nodes>
            </DxTreeViewNode>
        </Nodes>
    </DxTreeView>
</div>

css

.container {
    border: 2px dashed black;
    width: 300px;
}

Templates

Use the following <DxTreeView> properties to specify a common node template and a text template for all nodes:

In unbound mode, you can create node templates individually. These templates have priority over common templates. Use the following <DxTreeViewNode> properties:

Template
TextTemplate
Razor
ComponentSet.cs
DataSource

razor

<DxTreeView Data="@ComponentSets.Data"
            @ref="@treeView">
    <DataMappings>
        <DxTreeViewDataMapping Children="ComponentSets" />
    </DataMappings>
    <NodeTemplate>
        @{
            var dataItem = (ComponentSet)context.DataItem;
        }
        @if (!context.IsLeaf) {
            <h4 class="my-0 p-2 d-flex align-items-center">
                @if (context.Expanded) {
                    <span class="oi oi-chevron-top"></span>
                }
                else {
                    <span class="oi oi-chevron-bottom"></span>
                }
            <span class="ms-3 flex-grow-1">@dataItem.Title</span>
            </h4>
        }
        else {
            <div class="d-flex p-2">
                <div class="flex-grow-1">
                    <h5 class="mt-0">@dataItem.Title</h5>
                    @dataItem.Description
                </div>
            </div>
        }
    </NodeTemplate>
</DxTreeView>

@code {
    DxTreeView treeView;
    protected override Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender)
            treeView.ExpandAll();
        return base.OnAfterRenderAsync(firstRender);
    }
}

csharp

public class ComponentSet {
    Lazy<List<ComponentSet>> componentSets = new Lazy<List<ComponentSet>>();

    public ComponentSet(string title, string imageUrl = "", string fluentImageUrl = "", string description = "", List<ComponentSet> componentSets = null) {
        Title = title;
        ImageUrl = imageUrl;
        FluentImageUrl = fluentImageUrl;
        Description = description;
        if(componentSets != null)
            ComponentSets.AddRange(componentSets);
    }

    public string ImageUrl { get; set; }
    public string FluentImageUrl { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public List<ComponentSet> ComponentSets { get { return componentSets.Value; } }
}

csharp

public static class ComponentSets {
    private static readonly List<ComponentSet> componentSets = new List<ComponentSet>() {
            new ComponentSet("Components", componentSets:
                new List<ComponentSet>() {
                    new ComponentSet("Data Grid",
                        "The DevExpress Data Grid for Blazor allows you to display and manage data in a tabular format."),
                    new ComponentSet("Pivot Grid",
                        "The DevExpress Pivot Grid for Blazor allows you to display and analyze multi-dimensional data from an underlying data source."),
                    new ComponentSet("Charts",
                        "DevExpress Charts for Blazor help you transform data to its most appropriate, concise, and readable visual representation."),
                    new ComponentSet("Scheduler",
                        "The DevExpress Scheduler for Blazor allows you to create, display, and edit scheduled appointments in a calendar format."),
                    new ComponentSet("Data Editors",
                        "DevExpress Data Editors for Blazor include components that can be used as standalone editors or within the Data Grid edit form."),
                }
            )
        };
    public static List<ComponentSet> Data { get { return componentSets; } }
}

Run Demo: TreeView - Templates

The DevExpress Blazor TreeView component supports keyboard shortcuts that allow users to access every UI element, navigate through nodes, and select nodes. Keyboard navigation is implemented both on the client and server.

Note

Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.

The following shortcut keys are available:

Shortcut Keys	Description
Tab, Shift + Tab	Focuses the TreeView or moves focus to the next or previous focusable page element.
Within TreeView: Moves focus between the filter panel (if visible), the Check All checkbox (if visible), and the first node in the tree. Within a node template: Moves focus between nested focusable elements. After the first/last element, exits nested object navigation.
Right Arrow	For a collapsed node: Expands the node.
For an expanded node: Moves focus to the first child node.
Left Arrow	For an expanded node: Collapses the node.
For child nodes: Moves focus to the parent node.
Down Arrow	Moves focus to the next visible node. After the last node, moves focus to the first node.
Up Arrow	Moves focus to the previous visible node. After the first node, moves focus to the last node.
Home	Moves focus to the first node in the tree.
End	Moves focus to the last node in the tree, without expanding nodes.
Space	If the focused node’s checkbox is enabled: Toggles the check state.
If node selection is enabled: Selects the focused node.
Enter	Raises NodeClick and Click events.
If node selection is enabled: Selects the focused node. If a node has children and selection is disabled: Toggles the focused node’s expanded state.
For a templated node: Moves focus to the first focusable element within a template.
Esc	Within a node template: Exits nested object navigation.

Examples

Our knowledge base contains a wide array of sample projects that demonstrate the most popular usage scenarios, such as:

You can find more task-based examples in the following topic: Blazor TreeView - Examples.

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

Inheritance

Object ComponentBase DxComponentBase DevExpress.Blazor.Base.DxAsyncDisposableComponent DevExpress.Blazor.Base.DxDecoratedComponent DxComponent DxTreeView

DxTreeView Class

DxTreeView Class

Declaration

Remarks

Add a TreeView to a Project

API Reference

Add Nodes (Unbound Mode)

Bind to Data (Bound Mode)

Flat Data

Hierarchical Data

Static Render Mode Specifics

Load Child Nodes on Demand

Expand and Collapse Nodes

Filter Nodes

Select Nodes

Check Nodes

Organize Navigation Within the Application

Load Child Nodes on Demand Mode and Node Selection

Apply Customizations

Disable User Interactions

Add a Vertical Scrollbar

Wrap Node Text

Templates

Keyboard Navigation

Examples

Troubleshooting

Implements

Inheritance