👁 Image
Syncfusion.Blazor.TreeGrid 33.2.13

Syncfusion® Blazor TreeGrid Component

This package contains the Blazor TreeGrid Component for Blazor application. The Blazor TreeGrid is a feature-rich component used to visualize self-referential hierarchical (tree-like structure) data effectively in a tabular format. Its rich feature set includes many functionalities like data binding, editing, sorting, filtering, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats.

👁 Blazor TreeGrid

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor TreeGrid component to your Razor page.

<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
 <TreeGridColumns>
 <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
 <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
 </TreeGridColumns>
</SfTreeGrid>

@code
{
 public class BusinessObject
 {
 public int TaskId { get; set; }
 public string TaskName { get; set; }
 public int? ParentId { get; set; }
 }

 public List<BusinessObject> TreeData = new List<BusinessObject>();

 protected override void OnInitialized()
 {
 TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
 TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
 TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
 TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
 TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
 TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
 }
}

Documentation

• Getting Started with Blazor TreeGrid in Blazor Web App
• Getting Started with Blazor TreeGrid in Blazor WebAssembly App

Help resources

• Blazor TreeGrid Component Features Overview
• Blazor TreeGrid Component Documentation
• Blazor TreeGrid Component Demos
• Blazor TreeGrid Component Video Tutorials

Support and feedbacks

• For queries, reach our Syncfusion® support team or post the queries through the community forums.
• Request new feature through Syncfusion® feedback portal.

License

This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion®

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, WinUI, Flutter and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

| www.syncfusion.com | Toll Free: 1-888-9 DOTNET