The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxTreeView Class

A TreeView component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxTreeView :
    DxTreeViewBase

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.

Note

Online Demo: TreeView

To add the <DxTreeView> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxTreeView>...</DxTreeView> markup to your application.

  3. Configure the component (see the sections below).

Nodes / Unbound Mode

The <DxTreeView> component supports bound and unbound modes. In unbound mode, the user should populate a node hierarchy. Root nodes are stored within the TreeView's Nodes collection. Each node has its own collection of child nodes that can be accessed via its Nodes property.

A DxTreeViewNode class instance represents a node in code, and the Name property specifies its unique name. Use the Text property to specify the node's text, and the NavigateUrl property to specify the URL to navigate to when the node is clicked.

Blazor-TreeView-Nodes

<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" BadgeText="Upd" />
    <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="https://demos.devexpress.com/blazor/TreeView" BadgeText="New"  />
    <DxTreeViewNode Name="Tabs" Text="Tabs" NavigateUrl="https://demos.devexpress.com/blazor/Tabs" Visible="false" BadgeText="New" />
  </Nodes>
</DxTreeView>

Bind to Data

The <DxTreeView> component supports binding to hierarchical data. In the bound mode, items from the data source automatically populate the <DxTreeView> nodes.

Use the Data property to specify a data source and the ChildrenExpression property to specify a lambda expression that returns a node’s children.

<DxTreeView Data=@ChemicalElements.Groups
  TextExpression=@(dataItem => ((ChemicalElementGroup)dataItem).Name)
  ChildrenExpression=@(dataItem => ((ChemicalElementGroup)dataItem).Groups)>
</DxTreeView>
Note

If you bind a <DxTreeView> component with a nonempty Nodes collection to a data source, unbound data is lost. Bound data overwrites all the nodes added to the Nodes collection.

Online Demos:

TreeView - Binding to Hierarchical Data

TreeView - Master-Detail Data Binding

The table below lists API members related to data binding.

Member

Description

NameExpression

Specifies an expression that returns a node’s name.

TextExpression

Specifies an expression that returns a node’s text.

IconCssClassExpression

Specifies an expression that returns the name of a CSS class applied to a node’s icon.

NavigateUrlExpression

Specifies an expression that returns a node’s target URL.

Expand/Collapse Nodes

Users can double-click a node or click Expand/Collapse buttons to expand/collapse the node. To hide the Expand/Collapse buttons, set the ShowExpandButtons property false.

Blazor-TreeView-Expand-Collapse-Buttons

The table below lists related API:

Member

Description

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 a node's state 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.

Disable User Interactions

Set the Enabled property to false to ignore user interactions.

<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; }
}

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.DxComponent
DevExpress.Blazor.Internal.DxComponent<DevExpress.Blazor.Navigation.Internal.TreeViewComponentViewModel>
DxTreeViewBase
DxTreeView
See Also