ASP.NET MVC

Search results

Getting started with ASP.NET MVC Tree Grid control

22 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 MVC application to use our components.

Prerequisites

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

.Net Framework 4.5 and above.
ASP.NET MVC 4 or ASP.NET MVC 5
Visual Studio

Create ASP.NET MVC application

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

Default Template

Adding Syncfusion package

Once your project created, we need to add Syncfusion EJ2 package into your application by using NuGet Package Manager.

Open the NuGet package manager.

Solution Explorer

Install the Syncfusion.EJ2.MVC4 package to the application.

Nuget Demo

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.

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>

Adding Scripts and CSS reference

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

Nuget Package Manager:

Install the Syncfusion.EJ2.Javascript package to the application.

After Installation completed the script and CSS will be included in the project under the Scripts and Content folder.

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

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

Syncfusion.EJ2.Javascript includes typescript declaration files. If your application is not configured to compile typescript then exception may occur.

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>

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.

@Html.EJS().ScriptManager()

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.

razor

@Html.EJS().TreeGrid("TreeGrid").Render()

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.

razor

data.cs

@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).ChildMapping("Children").TreeColumnIndex(1).Render()

public class HomeController : Controller
    {
        public ActionResult 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 Columns property. In Column property 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.

razor

columns.cs

@Html.EJS().TreeGrid("Pager").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).Render()

public class HomeController : Controller
    {
        public ActionResult 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 PageSettings property.

In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the PageSizeMode property of PageSettings.

razor

page.cs

@Html.EJS().TreeGrid("Pager").AllowPaging().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()

public class HomeController : Controller
    {
        public ActionResult 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 SortSettings property.

razor

sorting.cs

@Html.EJS().TreeGrid("Pager").AllowPaging().AllowSorting().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()

public class HomeController : Controller
    {
        public ActionResult 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 FilterSettings property.

By default, filtered records are shown along with its parent records. This behavior can be changed by using the HierarchyMode property of FilterSettings.

razor

filtering.cs

@Html.EJS().TreeGrid("Pager").AllowPaging().AllowSorting().AllowFiltering().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()

public class HomeController : Controller
    {
        public ActionResult 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;
        }
    }

Output be like the below.

TreeGrid Sample Demo

Contents

Prerequisites
Create ASP.NET MVC 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 MVC 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!