Navigation in Blazor TreeView Component

18 Apr 202520 minutes to read

Using the NavigateUrl of the Blazor TreeView component, you can navigate from one page to another based on the node selection and link provided in the corresponding nodes.

To perform navigation in the TreeView component, use and map the NavigateUrl field in the data source.

Navigation URL binding in Blazor TreeView Component

In the Blazor TreeView component, use the NavigateUrl property to specify the URL to navigate to when the tree node is selected.

@using Syncfusion.Blazor.Navigations
<SfTreeView TValue="MailItem">
    <TreeViewFieldsSettings TValue="MailItem" Id="ID" NavigateUrl="NavigateUrl" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>

@code {
    public class MailItem
    {
        public string? ID { get; set; }
        public string? ParentId { get; set; }
        public string? FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
        public string? NavigateUrl { get; set; }
    }
    List<MailItem> MyFolder = new List<MailItem>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyFolder.Add(new MailItem
            {
                ID = "1",
                FolderName = "Inbox",
                HasSubFolders = true,
                Expanded = true,
                NavigateUrl = "/counter"
            });
        MyFolder.Add(new MailItem
            {
                ID = "2",
                ParentId = "1",
                FolderName = "Categories",
                Expanded = true,
                HasSubFolders = true,
                NavigateUrl = "/home"
            });
        MyFolder.Add(new MailItem
            {
                ID = "3",
                ParentId = "2",
                FolderName = "Primary",
                NavigateUrl = "/syncfusiondemo"
            });
        MyFolder.Add(new MailItem
            {
                ID = "4",
                ParentId = "2",
                FolderName = "Social",
                NavigateUrl = "/syncfusiondoc"
            });
        MyFolder.Add(new MailItem
            {
                ID = "5",
                ParentId = "2",
                FolderName = "Promotions",
                NavigateUrl = "/treeview"
            });
    }
}

Full row navigation in Blazor TreeView Component

The TreeView FullRowNavigable property is used to make the entire TreeView node navigable instead of text element in the Blazor TreeView component.

@using Syncfusion.Blazor.Navigations
<SfTreeView TValue="MailItem" FullRowNavigable="true">
    <TreeViewFieldsSettings TValue="MailItem" Id="ID" NavigateUrl="NavigateUrl" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>

@code{
    public class MailItem
    {
        public string? ID { get; set; }
        public string? ParentId { get; set; }
        public string? FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
        public string? NavigateUrl { get; set; }
    }
    List<MailItem> MyFolder = new List<MailItem>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyFolder.Add(new MailItem
        {
            ID = "1",
            FolderName = "Inbox",
            HasSubFolders = true,
            Expanded = true,
            NavigateUrl="/counter"
        });
        MyFolder.Add(new MailItem
        {
            ID = "2",
            ParentId = "1",
            FolderName = "Categories",
            Expanded = true,
            HasSubFolders = true,
            NavigateUrl="/home"
        });
        MyFolder.Add(new MailItem
        {
            ID = "3",
            ParentId = "2",
            FolderName = "Primary"
        });
        MyFolder.Add(new MailItem
        {
            ID = "4",
            ParentId = "2",
            FolderName = "Social"
        });
        MyFolder.Add(new MailItem
        {
            ID = "5",
            ParentId = "2",
            FolderName = "Promotions"
        });
    }
}

Handle processing on node click in Blazor TreeView Component

In the Blazor TreeView component, when clicking on the TreeView node, you can get the TreeView nodes’ id, text, and parent id using the NodeClicked event.

@using Syncfusion.Blazor.Navigations
<div class="tree">
<SfTreeView TValue="MailItem" @ref="tree">
    <TreeViewEvents TValue="MailItem" NodeClicked="nodeClicked"></TreeViewEvents>
    <TreeViewFieldsSettings TValue="MailItem" Id="ID" HtmlAttributes="HtmlAttributes" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>
</div>
<div class="containers">
    <p>Details of the clicked node</p>
<table >
        <tr>
            <th style="width: 50%">ID</th>
            <td style="width: 50%" align="center"><div>@ID</div></td>
        </tr>
        <tr>
            <th style="width: 50%;">Text</th>
            <td style="width: 30%" align="center">
                <div>@Text</div>
            </td>
        </tr>
        <tr><th style="width: 50%;" >Parent ID</th>
            <td style="width: 30%" align="center">
                    @if (ParentID == null)
                    {
                        <div>null</div>
                    }
                    else
                    {
                        <div>@ParentID</div>
                    }
            </td>
        </tr>
    </table>
</div>
@code {
    SfTreeView<MailItem> tree;
    public class MailItem
    {
        public string? ID { get; set; }
        public string? ParentId { get; set; }
        public string? FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
        public Dictionary<string, object> HtmlAttributes { get; set; }
    }

    List<MailItem> MyFolder = new List<MailItem>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyFolder.Add(new MailItem
            {
                ID = "1",
                FolderName = "Inbox",
                HasSubFolders = true,
                Expanded = true
            });
        MyFolder.Add(new MailItem
            {
                ID = "2",
                ParentId = "1",
                FolderName = "Categories",
                Expanded = true,
                HasSubFolders = true
            });
        MyFolder.Add(new MailItem
            {
                ID = "3",
                ParentId = "2",
                FolderName = "Primary"
            });
        MyFolder.Add(new MailItem
            {
                ID = "4",
                ParentId = "2",
                FolderName = "Social"
            });
        MyFolder.Add(new MailItem
            {
                ID = "5",
                ParentId = "2",
                FolderName = "Promotions"
            });

    }
    public string? ID;
    public string? Text;
    public string? ParentID;
    public void nodeClicked(NodeClickEventArgs args)
    {
        ID = (args.NodeData.Id);
        Text = (args.NodeData.Text);
        ParentID = (args.NodeData.ParentID);
    }
}
<style>
    .containers {
        margin-top: -200px;
        margin-left: 800px;
    }
    .tree{
        width:50%;
    }
</style>

Tree node as hyperlink in Blazor TreeView Component

The NavigateUrl property is used to navigate from one page to other pages on tree node selection. Using the CSS styles, you can customize the TreeView node as a hyperlink.

@using Syncfusion.Blazor.Navigations
<SfTreeView TValue="MailItem">
    <TreeViewFieldsSettings TValue="MailItem" Id="ID" NavigateUrl="NavigateUrl" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>

@code{
    public class MailItem
    {
        public string? ID { get; set; }
        public string? ParentId { get; set; }
        public string? FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
        public string? NavigateUrl { get; set; }
    }
    List<MailItem> MyFolder = new List<MailItem>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyFolder.Add(new MailItem
        {
            ID = "1",
            FolderName = "Inbox",
            HasSubFolders = true,
            Expanded = true,
            NavigateUrl="/counter"
        });
        MyFolder.Add(new MailItem
        {
            ID = "2",
            ParentId = "1",
            FolderName = "Categories",
            Expanded = true,
            HasSubFolders = true,
            NavigateUrl="/home"
        });
        MyFolder.Add(new MailItem
        {
            ID = "3",
            ParentId = "2",
            FolderName = "Primary",
            NavigateUrl = "/"
        });
        MyFolder.Add(new MailItem
        {
            ID = "4",
            ParentId = "2",
            FolderName = "Social",
            NavigateUrl = "/social"
        });
        MyFolder.Add(new MailItem
        {
            ID = "5",
            ParentId = "2",
            FolderName = "Promotions",
            NavigateUrl = "/promotions"
        });
    }
}
<style>
    .e-treeview .e-list-text {
        cursor: pointer;
        color: blue;
        text-decoration: underline;
    }
</style>

NavigateUrl with Built-in URLs

The functionality of the href attribute in the Blazor TreeView component’s NavigateUrl property has been updated to align with Blazor routing standards. Instead of rendering a traditional anchor tag with an href, the component now uses the NavigationManager.NavigateTo method to programmatically navigate to the specified URL.

However, when using the built-in URLs from the NuGet package (for example, MicrosoftIdentity/Account/SignOut from Microsoft.Identity.Web.UI), these URLs may not function properly in the application. To resolve this, you need to prevent the default navigation functionality by setting args.Cancel to true and then use the NavigationManager.NavigateTo method within the NodeSelecting event, as shown below:

@inject NavigationManager Navigate
@using Syncfusion.Blazor.Navigations

<SfTreeView TValue="NavbarItemTree" ExpandOn="@ExpandAction.Click">
    <TreeViewEvents TValue="NavbarItemTree" NodeSelecting="NodeSelecting"></TreeViewEvents>
    <TreeViewFieldsSettings TValue="NavbarItemTree"
                            Id="@nameof(NavbarItemTree.NodeId)"
                            NavigateUrl="@nameof(NavbarItemTree.NodeLink)"
                            Text="@nameof(NavbarItemTree.NodeText)"
                            HasChildren="@nameof(NavbarItemTree.HasChild)"
                            ParentID="@nameof(NavbarItemTree.ParentId)"
                            DataSource="@NavbarItemNodes">
    </TreeViewFieldsSettings>
</SfTreeView>

@code {
    public void NodeSelecting(NodeSelectEventArgs args)
    {
        if (args.NodeData.Id == "3")
        {
            args.Cancel = true;
            Navigate.NavigateTo("MicrosoftIdentity/Account/SignOut", true);
        }
    }

    public class NavbarItemTree
    {
        public int NodeId { get; set; }
        public int? ParentId { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public bool Selected { get; set; }
        public string NodeText { get; set; }
        public string NodeLink { get; set; }
    }

    private readonly List<NavbarItemTree> NavbarItemNodes = new();

    protected override void OnInitialized()
    {
        NavbarItemNodes.Add(new NavbarItemTree
        {
            NodeId = 1,
            NodeText = "Account",
            HasChild = true
        });

        NavbarItemNodes.Add(new NavbarItemTree
        {
            ParentId = 1,
            NodeId = 2,
            NodeLink = "/counter",
            NodeText = "Profile"
        });

        NavbarItemNodes.Add(new NavbarItemTree
        {
            ParentId = 1,
            NodeId = 3,
            NodeLink = "MicrosoftIdentity/Account/SignOut",
            NodeText = "Logout"
        });
    }
}