DxTreeView.AllowSelectNodes Property

Specifies whether or not nodes can be selected.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

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.

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

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

See Also

DxTreeView Class

DxTreeView Members

DevExpress.Blazor Namespace