Data binding in ASP.NET CORE Tree Grid Component
23 Aug 202311 minutes to read
The TreeGrid uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection.
It supports two kinds of data binding method:
- Local data
- Remote data
Binding with ajax
You can use TreeGrid dataSource property to bind the data source to TreeGrid from external Fetch request. In the below code we have fetched the data source from the server with the help of Fetch request and provided that to dataSource property by using onSuccess event of the Fetch.
<ejs-button id="updateTree" content="Update TreeGrid"></ejs-button>
<ejs-treegrid id="TreeGrid" idMapping="TaskID" parentIdMapping="ParentItem" allowPaging="true" treeColumnIndex="1" hasChildMapping="isParent">
<e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" type="date" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
document.getElementById("updateTree").addEventListener("click", function (e) {
var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
var fetch = new ej.base.Fetch('https://services.syncfusion.com/aspnet/production/api/SelfReferenceData', 'GET');
treegrid.showSpinner();
fetch.send();
fetch.onSuccess = function (data) {
treegrid.hideSpinner();
treegrid.dataSource = data;
};
});
</script>public IActionResult Index()
{
return View();
}NOTE
- If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions.
You can refer to ourASP.NET Core Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid exampleASP.NET Core Tree Grid exampleto knows how to present and manipulate data.
- If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions.
Handling expandStateMapping
To denotes the expand status of parent row, define the expandStateMapping property of tree grid.
The expandStateMapping property maps the field name in data source, that denotes whether parent record is in expanded or collapsed state and this is useful to renders parent row in expanded or collapsed state based on this mapping property value in data source.
<ejs-treegrid id="TreeGrid" idMapping="TaskID" parentIdMapping="ParentValue" expandStateMapping="IsExpanded" hasChildMapping="isParent" treeColumnIndex="1" height="400">
<e-data-manager url="/Home/DataSource" adaptor="UrlAdaptor"></e-data-manager>
<e-treegrid-columns>
<e-treegrid-column field="TaskID" headerText="ID" textAlign="Left" width="40"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Name" textAlign="Left" width="95"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Tag Data" textAlign="Left" width="95"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>public IActionResult ExpandStateMapping()
{
return View();
}
public class TreeData
{
public static List<TreeData> tree = new List<TreeData>();
[System.ComponentModel.DataAnnotations.Key]
public int TaskID { get; set; }
public string TaskName { get; set; }
public int Duration { get; set; }
public int? ParentValue { get; set; }
public bool? isParent { get; set; }
public bool IsExpanded { get; set; }
public TreeData() { }
public static List<TreeData> GetTree()
{
if (tree.Count == 0)
{
int root = 0;
for (var t = 1; t <= 500; t++)
{
Random ran = new Random();
string math = (ran.Next() % 3) == 0 ? "High" : (ran.Next() % 2) == 0 ? "Release Breaker" : "Critical";
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = root;
tree.Add(new TreeData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), isParent = true, IsExpanded = false, ParentValue = null, Duration = ran.Next(1, 50) });
int parent = root;
for (var d = 0; d < 1; d++)
{
root++;
string value = ((parent + 1) % 3 == 0) ? "Low" : "Critical";
int par = parent + 1;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = root;
tree.Add(new TreeData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), isParent = true, IsExpanded = false, ParentValue = rootItem, Duration = ran.Next(1, 50) });
int subparent = root;
for (var c = 0; c < 500; c++)
{
root++;
string val = ((subparent + c + 1) % 3 == 0) ? "Low" : "Critical";
int subchild = subparent + c + 1;
string progress = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int childID = root ;
tree.Add(new TreeData() { TaskID = childID, TaskName = "sub Child task " + childID.ToString(), isParent = false, IsExpanded = false, ParentValue = subparent, Duration = ran.Next(1, 50) });
}
}
}
}
return tree;
}
}You can refer to our
ASP.NET Core Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid exampleASP.NET Core Tree Grid exampleto knows how to present and manipulate data.