DxTreeView.UrlMatchMode Property

Specifies whether the TreeView can automatically expand to the node and select it if the DxTreeViewNode.NavigateUrl property value points to the active web page.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

[DefaultValue(NavigationUrlMatchMode.CurrentPath)]
[Parameter]
public NavigationUrlMatchMode UrlMatchMode { get; set; }

Property Value

Type	Default	Description
NavigationUrlMatchMode	CurrentPath	An NavigationUrlMatchMode enumeration value.

Available values:

Name	Description
None	Automatic selection synchronization is disabled.
CurrentPath	The component selects an item if the item’s NavigateUrl property value matches the current browser URL. The query string appended to the URL is ignored.
Prefix	The component selects an item if the item’s NavigateUrl property value starts with the current browser URL and vice versa.
Exact	The component selects an item if the item’s NavigateUrl property value matches the current browser URL.

Remarks

The item becomes selected if its DxTreeViewNode.NavigateUrl property value matches the active web page. If the control does select the item, it expands all parent items. Set the AllowSelectNodes property value to true to enable this functionality.

The following example disables URL synchronization:

Razor

<DxTreeView AllowSelectNodes="true" UrlMatchMode="NavigationUrlMatchMode.None">
    <Nodes>
        <DxTreeViewNode NavigateUrl="./" Text="Overview"></DxTreeViewNode>
        <DxTreeViewNode NavigateUrl="grid" Text="Grid"></DxTreeViewNode>
    </Nodes>
</DxTreeView>

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>

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.