Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTreeView.AllowSelectNodes Property

Specifies whether or not nodes can be selected.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(false)]
[Parameter]
public bool AllowSelectNodes { get; set; }

#Property Value

Type Default Description
Boolean false

true, to allow node selection; otherwise, false

#Remarks

When the AllowSelectNodes property is set to true, the DxTreeView component allows users to click a node to select it. When a user selects a node, the SelectionChanged event fires.

You can use the SelectNode method to select a node programmatically.

The following code snippet gets the selected node’s text.

Razor
<DxTreeView AllowSelectNodes="true" 
            SelectionChanged="@SelectionChanged">
    @* ... *@
</DxTreeView>

@code  {
    string SelectedGroup = "none";

    void SelectionChanged(TreeViewNodeEventArgs e) {
        SelectedGroup = e.NodeInfo.Text;
        InvokeAsync(StateHasChanged);
    }
}      

TreeView Node Selection

Run Demo: TreeView - Selection

#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>

Selection with LoadOnDemand enabled

The image below shows selection with the disabled LoadChildNodesOnDemand mode:

Selection with LoadOnDemand disabled

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.

See Also