DxTreeView.AllowSelectNodes Property

Specifies whether or not nodes can be selected.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool AllowSelectNodes { get; set; }

Property Value

Type	Description
Boolean	true, to allow selecting nodes; 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 is fired.

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

The code sample below demonstrates how to get the selected node’s text.

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

@code  {
    string SelectedGroup = "none";

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

The image below shows the result.

Run Demo: TreeView - Selection

Node Selection and Load Child Nodes on Demand Mode

When the AllowSelectNodes property is set to true and a user navigates to a URL specified for a TreeView node, this node is selected. If the LoadChildNodesOnDemand property is true, a TreeView’s root node is not expanded and a corresponding child node is not selected. This occurs because child nodes are not loaded until the user expands the corresponding parent node.

The code below 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.

<DxTreeView CssClass="app-sidebar" AllowSelectNodes="true" LoadChildNodesOnDemand="true">
    <Nodes>
        <DxTreeViewNode Text="Data 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>