Blazor Tree Component - Quick Getting Started with 5 Minutes

3 mins read

Blazor Tree Component (Blazor TreeView) is a graphical user interface component that allows you to represent hierarchical data in a tree structure. It has great performance combined with advanced features like load on demand, check box support, multiple selection, tree navigation, drag and drop, tree node editing, and template support.

In this knowledge base, we are going to provide details about how to include a TreeView in your Blazor server-side application. You can refer Getting Started with Blazor for Server-Side TreeView documentation page for configuration specifications.

Importing Syncfusion Blazor component in the application

You can use any one of the below standards to install the Syncfusion Blazor library in your application.

Install Syncfusion.Blazor.Navigations NuGet package to the application by using the NuGet Package Manager. Refer to the Individual NuGet Packages section for the available NuGet packages.
You can add the client-side style resources using NuGet package to the <head> element of the ~/wwwroot/index.html page in Blazor WebAssembly app or ~/Pages/_Host.cshtml page in Blazor Server app.
Note:
You can also add the client-side style resources through CDN.

<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

Note:

Syncfusion.Blazor package should not be installed along with individual NuGet packages. Hence, you have to add the above Syncfusion.Blazor.Themes static web assets (styles) in the application.

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Add Syncfusion Blazor service in Startup.cs (Server-side application)

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

using Syncfusion.Blazor;
 
namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

Add Syncfusion Blazor service in Program.cs (Client-side application)

Open the Program.cs file and add services required by Syncfusion components using builder.Services.AddSyncfusionBlazor() method. Add this method in the Main function as follows.

namespace BlazorApplication
{
public class Program
{
    ....
    ....
    public static async Task Main(string[] args)
        {
        ....
        ....
        builder.Services.AddSyncfusionBlazor();
    }
}
}

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.Blazor.Navigations packages.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

Adding TreeView component to the application

Now, add the Blazor TreeView component in any web page razor in the Pages folder. For example, the TreeView component is added in the ~/Pages/Index.razor page.

<SfTreeView TValue="MailItem">
<TreeViewFieldsSettings TValue="MailItem" Id="Id" 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; }
}
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"
    });
}
}

Blazor TreeView Component

Conclusion

I hope you enjoyed learning about how to quick get started with the Blazor Tree component in 5 minutes. You can explore the runnable sample of getting started with Blazor Tree Component from this this GitHub location.

You can refer to our Blazor Tree feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor TreeView example to understand how to present and manipulate data.

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor TreeView and other Blazor components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)