TreeView for Navigation

The TreeView can navigate between different pages in the application.

• Use a Url property in the model, or set the UrlField attribute in a TreeViewBinding. Thus the TreeView will generate navigation links.
• It is possible to add the TreeView to the MainLayout.razor, outside the app @Body.

External links should include a protocol, for example https://.

Blazor doesn't support navigation to page sections out-of-the-box.

For specific scenarios, use a Template to generate the desired links manually (e.g. NavLink components) to enable fine-tuning.

TreeView for page navigation

<TelerikTreeView Data="@TreeViewData"
                 @bind-ExpandedItems="@ExpandedItems"/>

@code {
    List<TreeItem> TreeViewData { get; set; }
    IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        GenerateData();

        ExpandedItems = TreeViewData.Where(x => x.HasChildren == true).ToList();
    }

    void GenerateData()
    {
        TreeViewData = new List<TreeItem>();

        TreeViewData.Add(new TreeItem()
        {
            Id = 1,
            Text = "App Pages",
            ParentId = null,
            HasChildren = true
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 2,
            Text = "Home",
            ParentId = 1,
            Url = "/"
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 3,
            Text = "Counter",
            ParentId = 1,
            Url = "/counter"
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 4,
            Text = "Fetch Data",
            ParentId = 1,
            Url = "/fetchdata"
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 5,
            Text = "External Pages",
            ParentId = null,
            HasChildren = true
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 6,
            Text = "Telerik",
            ParentId = 5,
            Url = "https://www.telerik.com/"
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 7,
            Text = "UI for Blazor Demos",
            ParentId = 5,
            Url = "https://demos.telerik.com/blazor-ui/"
        });
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Text { get; set; }
        public string Url { get; set; }
        public bool HasChildren { get; set; }
    }
}

Notes

• The UrlField has a default value (Url) and that will be used if present in the model even if you do not define it explicitly.

• The component uses the NavigationManager from the framework to perform the navigation based on the value from the UrlField.

  • If you have a template that adds anchors, or use a click event to navigate the user yourself, this may lead to double navigation and errors, especially if your model has a field called Url. To avoid such problems, either let the Telerik component do the navigation and remove the application-specific code that does it as well, or remove the URL setting (either rename the model field, or point the UrlField to a non-existing field).

See Also

• TreeView Overview
• TreeView Data Binding
• TreeView Templates