Getting Started with ASP.NET Core Tree Grid Control
23 Jul 20269 minutes to read
This section explains how to include the ASP.NET Core Tree Grid control in your ASP.NET Core application using Visual Studio, and Visual Studio Code.
Prerequisites
.NET and Visual Studio compatibility
| .NET version | Minimum Visual Studio version |
|---|---|
| .NET 10.0 | Visual Studio 2026 18.0.0 or later |
| .NET 9.0 | Visual Studio 2022 17.12.0 or later |
| .NET 8.0 | Visual Studio 2022 17.8.0 or later |
| .NET Core SDK 3.1 | Visual Studio 2019 16.4 or later |
| .NET Core SDK 2.0 | Visual Studio 2017 15.7 or later |
Browser support
| Browser | Versions |
|---|---|
| Google Chrome, including Android & iOS | Latest Version |
| Mozilla Firefox | Latest Version |
| Microsoft Edge | Latest Version |
| Apple Safari, including iOS | Latest Version |
| Opera | Latest Version |
| Microsoft Internet Explorer | 11 |
Create an new ASP.NET Core Web App with Razor pages
Create an ASP.NET Core Web App using Visual Studio via Microsoft Templates or the Syncfusion® ASP.NET Core Extension. For detailed instructions, refer to the ASP.NET Core Web App Getting Started documentation.
Run the following command to create a new ASP.NET Core Web App.
dotnet new webapp -o RazorPagesMovie
code -r RazorPagesMovieAlternatively, create an ASP.NET Core Web App using Visual Studio Code via Microsoft Templates, or the Syncfusion® ASP.NET Core Extension, or the C# Dev Kit extension.
Install the required ASP.NET Core packages
Install the Syncfusion.AspNetCore.TreeGrid and Syncfusion.AspNetCore.Themes NuGet packages. All Syncfusion ASP.NET Core packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.AspNetCore.TreeGridandSyncfusion.AspNetCore.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
Install-Package Syncfusion.AspNetCore.TreeGrid -Version 34.1.29
Install-Package Syncfusion.AspNetCore.Themes -Version 34.1.29Open the terminal and run the following commands.
dotnet add package Syncfusion.AspNetCore.TreeGrid -v 34.1.29
dotnet add package Syncfusion.AspNetCore.Themes -v 34.1.29Add ASP.NET Core Tag Helpers
After the packages are installed, open ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Base and Syncfusion.AspNetCore.TreeGrid Tag Helpers.
@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.TreeGridAdd stylesheet and script resources
The theme stylesheet and script can be referenced from CDN. Include the stylesheet and script references inside the <head> of ~/Pages/Shared/_Layout.cshtml file.
<head>
...
@* ASP.NET Core controls styles *@
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
@* ASP.NET Core controls scripts *@
<script src="_content/Syncfusion.AspNetCore.TreeGrid/scripts/sf-treegrid.min.js"></script>
</head>Register the Script Manager
Open the ~/Pages/Shared/_Layout.cshtml file and register the script manager <ejs-scripts> at the end of the <body> element as follows.
<body>
...
@* ASP.NET Core Script Manager *@
<ejs-scripts></ejs-scripts>
</body>Add ASP.NET Core Tree Grid control
Add the ASP.NET Core Tree Grid control in the ~/Pages/Index.cshtml file.
@page
@model RazorPagesMovie.Pages.IndexModel
@{
List<Task> task = new List<Task>();
var parent1 = new Task { TaskID = 1, TaskName = "Planning", StartDate = new DateTime(2025, 2, 4), EndDate = new DateTime(2025, 2, 7), Duration = 4, Children = new List<Task>() };
parent1.Children.Add(new Task(2, "Plan timeline", new DateTime(2025, 2, 4), new DateTime(2025, 2, 7), 4));
parent1.Children.Add(new Task(3, "Plan budget", new DateTime(2025, 2, 4), new DateTime(2025, 2, 7), 4));
var parent2 = new Task { TaskID = 4, TaskName = "Design", StartDate = new DateTime(2025, 2, 10), EndDate = new DateTime(2025, 2, 14), Duration = 5, Children = new List<Task>() };
parent2.Children.Add(new Task(5, "Software Specification", new DateTime(2025, 2, 10), new DateTime(2025, 2, 12), 3));
parent2.Children.Add(new Task(6, "Design Documentation", new DateTime(2025, 2, 13), new DateTime(2025, 2, 14), 2));
parent2.Children.Add(new Task(7, "Design complete", new DateTime(2025, 2, 14), new DateTime(2025, 2, 14), 1));
task.Add(parent1);
task.Add(parent2);
}
<ejs-treegrid id="TreeGrid" dataSource="@task" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskID" headerText="Task ID" textAlign="Right" width="95"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="220"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText="Start Date" format="yMd" type="date" textAlign="Right" width="115"></e-treegrid-column>
<e-treegrid-column field="EndDate" headerText="End Date" format="yMd" type="date" textAlign="Right" width="115"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="100"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorPagesMovie.Pages;
public class IndexModel : PageModel
{
public void OnGet() { }
}
public class Task
{
public Task() { }
public int? TaskID { get; set; }
public string? TaskName { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public int? Duration { get; set; }
public List<Task>? Children { get; set; }
public Task(int taskID, string taskName, DateTime start, DateTime end, int duration)
{
this.TaskID = taskID;
this.TaskName = taskName;
this.StartDate = start;
this.EndDate = end;
this.Duration = duration;
}
}Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core Tree Grid control will render in your default web browser.
Open the terminal and run the following command.
dotnet run