DxTreeView.AllowSelectNodes Property

Specifies whether or not nodes can be selected.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

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 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="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.