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.
To get start with ASP.NET Core application, need to ensure the following software to be installed on the machine.
Create ASP.NET Core Web Application with default template project in Visual Studio 2017.
Using Nuget Package Manager you need to add Syncfusion.EJ2.AspNet.Core package into your application.
Open the NuGet
package manager.
Install the Syncfusion.EJ2.AspNet.Core package to the application
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
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>
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>
To initialize the TreeGrid component add the below code to your Index.cshtml view page which is present under Views/Home folder.
<ejs-treegrid id="TreeGrid">
</ejs-treegrid>
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.
<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.
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:
field
property is to map with a property name an array of JavaScript objects.headerText
property is to change the title of columns.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.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.<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;
}
}
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.
<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;
}
}
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.
<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;
}
}
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.