ASP.NET Core

Search results

Getting started with ASP.NET Core Tree Grid control

27 Jul 2021 / 4 minutes to read

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our components.

Prerequisites

To get start with ASP.NET Core application, need to ensure the following software to be installed on the machine.

Visual Studio 2017
DotNet Core 2.0

Create ASP.NET Core application

Create ASP.NET Core Web Application with default template project in Visual Studio 2017.

Alt text

Adding Syncfusion package

Using Nuget Package Manager you need to add Syncfusion.EJ2.AspNet.Core package into your application.

Open the NuGet package manager.

Alt text

Install the Syncfusion.EJ2.AspNet.Core package to the application

Alt text

After Installation completed the Syncfusion DLL’s will be included in the project.

You need to install NewtonSoft.JSON as dependency since Syncfusion.EJ2.AspNet.Core dependent to NewtonSoft.JSON package.

Open the Views/_ViewImports.cshtml to import Syncfusion.EJ2.AspNet.Core package.

@addTagHelper *, Syncfusion.EJ2

Adding Scripts and CSS reference

You can add client side resource through CDN or NPM package in the layout page Views/Shared/_Layout.cshtml.

CDN Link:

<head>
@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>

NPM Package:

Install @syncfusion/ej2 package using below command.

npm install @syncfusion/ej2

Now the required scripts and CSS files are available in the ../node_modules/@syncfusion/ej2/dist and CSS ../node_modules/@syncfusion/ej2/styles package folders respectively. Copy those script and themes files from the node_modules into the wwwroot folder of the application.

<head>
@* Syncfusion Essential JS 2 Styles *@
<link href="~/styles/material.css" rel="stylesheet" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="~/scripts/ej2.min.js"></script>
</head>

Adding ScriptManager in layout page

Add ScriptManager to the bottom of the _Layout.cshtml page. The ScriptManager used to place our control initialization script in the page.

<body>
@RenderBody()
@RenderSection("Scripts", required: false)
<ejs-scripts></ejs-scripts>
</body>

Add TreeGrid Component

To initialize the TreeGrid component add the below code to your Index.cshtml view page which is present under Views/Home folder.

tagHelper

<ejs-treegrid id="TreeGrid">

</ejs-treegrid>

Defining Row Data

To bind data for the TreeGrid component, you can assign a IEnumerable object to the dataSource property. The list data source can also be provided as an instance of the DataManager.

tagHelper

page.cs

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" childMapping="Children" treeColumnIndex="1">
    
</ejs-treegrid>

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.DataSource = TreeGridItems.GetTreeData();
            return View();
        }
    }
    public class TreeGridItems
    {
        public TreeGridItems() { }
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public int Duration { get; set; }
        public List<TreeGridItems> Children { get; set; }

        public static List<TreeGridItems> GetTreeData()
        {
            List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();

            TreeGridItems Record1 = null;

            Record1 = new TreeGridItems()
            {
                TaskId = 1,TaskName = "Planning", StartDate = new DateTime(2016, 06, 07), Duration = 5, Children = new List<TreeGridItems>(),
            };
            TreeGridItems Child1 = new TreeGridItems()
            {
                TaskId = 2, TaskName = "Plan timeline", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };

            TreeGridItems Child2 = new TreeGridItems()
            {
                TaskId = 3, TaskName = "Plan budget", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            TreeGridItems Child3 = new TreeGridItems()
            {
                TaskId = 4, TaskName = "Allocate resources", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            Record1.Children.Add(Child1);
            Record1.Children.Add(Child2);
            Record1.Children.Add(Child3);
            TreeGridItems Record2 = new TreeGridItems()
            {
                TaskId = 6, TaskName = "Design", StartDate = new DateTime(2021, 08, 25), Duration = 3, Children = new List<TreeGridItems>()
            };
            TreeGridItems Child5 = new TreeGridItems()
            {
                TaskId = 7, TaskName = "Software Specification", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };

            TreeGridItems Child6 = new TreeGridItems()
            {
                TaskId = 8, TaskName = "Develop prototype", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };
            TreeGridItems Child7 = new TreeGridItems()
            {
                TaskId = 9, TaskName = "Get approval from customer", StartDate = new DateTime(2024, 06, 27), Duration = 2
            };
            Record2.Children.Add(Child5);
            Record2.Children.Add(Child6);
            Record2.Children.Add(Child7);
            BusinessObjectCollection.Add(Record1);
            BusinessObjectCollection.Add(Record2);
            return BusinessObjectCollection;
        }
    }

childMapping specifies the mapping property path for subtasks in dataSource. treeColumnIndex specifies the index of the column that needs to have the expander button.

Defining Columns

The columns are automatically generated when columns declaration is empty or undefined while initializing the treegrid.

The TreeGrid has an option to define columns using e-treegrid-columns tag helper. In e-treegrid-column tag helper you have properties to customize columns.

Let’s check the properties used here:

The field property is to map with a property name an array of JavaScript objects.
The headerText property is to change the title of columns.
The textAlign property is to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, you need to define textAlign as Right.
Using format property you can format number and date values to standard or custom formats. Here, you have defined it for the conversion of numeric values to currency.

tagHelper

page.cs

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" 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" textAlign="Right" format="yMd" type="date" width="115"></e-treegrid-column>
        <e-treegrid-column field="EndDate" headerText=" End Date" textAlign="Right" format="yMd" type="date" width="115"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="105"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.DataSource = TreeGridItems.GetTreeData();
            return View();
        }
    }
    public class TreeGridItems
    {
        public TreeGridItems() { }
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public int Duration { get; set; }
        public List<TreeGridItems> Children { get; set; }

        public static List<TreeGridItems> GetTreeData()
        {
            List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();

            TreeGridItems Record1 = null;

            Record1 = new TreeGridItems()
            {
                TaskId = 1,TaskName = "Planning", StartDate = new DateTime(2016, 06, 07), Duration = 5, Children = new List<TreeGridItems>(),
            };
            TreeGridItems Child1 = new TreeGridItems()
            {
                TaskId = 2, TaskName = "Plan timeline", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };

            TreeGridItems Child2 = new TreeGridItems()
            {
                TaskId = 3, TaskName = "Plan budget", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            TreeGridItems Child3 = new TreeGridItems()
            {
                TaskId = 4, TaskName = "Allocate resources", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            Record1.Children.Add(Child1);
            Record1.Children.Add(Child2);
            Record1.Children.Add(Child3);
            TreeGridItems Record2 = new TreeGridItems()
            {
                TaskId = 6, TaskName = "Design", StartDate = new DateTime(2021, 08, 25), Duration = 3, Children = new List<TreeGridItems>()
            };
            TreeGridItems Child5 = new TreeGridItems()
            {
                TaskId = 7, TaskName = "Software Specification", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };

            TreeGridItems Child6 = new TreeGridItems()
            {
                TaskId = 8, TaskName = "Develop prototype", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };
            TreeGridItems Child7 = new TreeGridItems()
            {
                TaskId = 9, TaskName = "Get approval from customer", StartDate = new DateTime(2024, 06, 27), Duration = 2
            };
            Record2.Children.Add(Child5);
            Record2.Children.Add(Child6);
            Record2.Children.Add(Child7);
            BusinessObjectCollection.Add(Record1);
            BusinessObjectCollection.Add(Record2);
            return BusinessObjectCollection;
        }
    }

Enable Paging

The paging feature enables users to view the treegrid record in a paged view. It can be enabled by setting the allowPaging property to true. Pager can be customized using e-treegrid-pagesettings tag helper.

tagHelper

page.cs

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" allowPaging="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-pagesettings pageSizes="true" pageSize="10" pageCount="4"></e-treegrid-pagesettings>
    <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" textAlign="Right" format="yMd" type="date" width="115"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.DataSource = TreeGridItems.GetTreeData();
            return View();
        }
    }
    public class TreeGridItems
    {
        public TreeGridItems() { }
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public int Duration { get; set; }
        public List<TreeGridItems> Children { get; set; }

        public static List<TreeGridItems> GetTreeData()
        {
            List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();

            TreeGridItems Record1 = null;

            Record1 = new TreeGridItems()
            {
                TaskId = 1,TaskName = "Planning", StartDate = new DateTime(2016, 06, 07), Duration = 5, Children = new List<TreeGridItems>(),
            };
            TreeGridItems Child1 = new TreeGridItems()
            {
                TaskId = 2, TaskName = "Plan timeline", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };

            TreeGridItems Child2 = new TreeGridItems()
            {
                TaskId = 3, TaskName = "Plan budget", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            TreeGridItems Child3 = new TreeGridItems()
            {
                TaskId = 4, TaskName = "Allocate resources", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            Record1.Children.Add(Child1);
            Record1.Children.Add(Child2);
            Record1.Children.Add(Child3);
            TreeGridItems Record2 = new TreeGridItems()
            {
                TaskId = 6, TaskName = "Design", StartDate = new DateTime(2021, 08, 25), Duration = 3, Children = new List<TreeGridItems>()
            };
            TreeGridItems Child5 = new TreeGridItems()
            {
                TaskId = 7, TaskName = "Software Specification", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };

            TreeGridItems Child6 = new TreeGridItems()
            {
                TaskId = 8, TaskName = "Develop prototype", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };
            TreeGridItems Child7 = new TreeGridItems()
            {
                TaskId = 9, TaskName = "Get approval from customer", StartDate = new DateTime(2024, 06, 27), Duration = 2
            };
            Record2.Children.Add(Child5);
            Record2.Children.Add(Child6);
            Record2.Children.Add(Child7);
            BusinessObjectCollection.Add(Record1);
            BusinessObjectCollection.Add(Record2);
            return BusinessObjectCollection;
        }
    }

Enable Sorting

The sorting feature enables you to order the records. It can be enabled by setting the allowSorting property as true. Sorting feature can be customized using e-treegrid-sortsettings tag helper.

tagHelper

sorting.cs

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" allowSorting="true" allowPaging="true" 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" textAlign="Right" format="yMd" type="date" width="115"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.DataSource = TreeGridItems.GetTreeData();
            return View();
        }
    }
    public class TreeGridItems
    {
        public TreeGridItems() { }
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public int Duration { get; set; }
        public List<TreeGridItems> Children { get; set; }

        public static List<TreeGridItems> GetTreeData()
        {
            List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();

            TreeGridItems Record1 = null;

            Record1 = new TreeGridItems()
            {
                TaskId = 1,TaskName = "Planning", StartDate = new DateTime(2016, 06, 07), Duration = 5, Children = new List<TreeGridItems>(),
            };
            TreeGridItems Child1 = new TreeGridItems()
            {
                TaskId = 2, TaskName = "Plan timeline", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };

            TreeGridItems Child2 = new TreeGridItems()
            {
                TaskId = 3, TaskName = "Plan budget", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            TreeGridItems Child3 = new TreeGridItems()
            {
                TaskId = 4, TaskName = "Allocate resources", StartDate = new DateTime(2016, 06, 07), Duration = 5
            };
            Record1.Children.Add(Child1);
            Record1.Children.Add(Child2);
            Record1.Children.Add(Child3);
            TreeGridItems Record2 = new TreeGridItems()
            {
                TaskId = 6, TaskName = "Design", StartDate = new DateTime(2021, 08, 25), Duration = 3, Children = new List<TreeGridItems>()
            };
            TreeGridItems Child5 = new TreeGridItems()
            {
                TaskId = 7, TaskName = "Software Specification", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };

            TreeGridItems Child6 = new TreeGridItems()
            {
                TaskId = 8, TaskName = "Develop prototype", StartDate = new DateTime(2021, 08, 25), Duration = 3
            };
            TreeGridItems Child7 = new TreeGridItems()
            {
                TaskId = 9, TaskName = "Get approval from customer", StartDate = new DateTime(2024, 06, 27), Duration = 2
            };
            Record2.Children.Add(Child5);
            Record2.Children.Add(Child6);
            Record2.Children.Add(Child7);
            BusinessObjectCollection.Add(Record1);
            BusinessObjectCollection.Add(Record2);
            return BusinessObjectCollection;
        }
    }

Enable Filtering

The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the allowFiltering property as true. Filtering feature can be customized using e-treegrid-filtersettings tag helper.

Output be like the below.

TreeGrid Sample Output

Contents

Prerequisites
Create ASP.NET Core application
Adding Syncfusion package
Adding Scripts and CSS reference
Adding ScriptManager in layout page
Add TreeGrid Component
Defining Row Data
Defining Columns
Enable Paging
Enable Sorting
Enable Filtering

Contents

Prerequisites
Create ASP.NET Core application
Adding Syncfusion package
Adding Scripts and CSS reference
Adding ScriptManager in layout page
Add TreeGrid Component
Defining Row Data
Defining Columns
Enable Paging
Enable Sorting
Enable Filtering

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!