Local Data in ASP.NET MVC Tree Grid Component
21 Dec 202217 minutes to read
In Local Data binding, data source for rendering the TreeGrid control is retrieved from the same application locally.
Two types of Data binding are possible with the TreeGrid control.
- Hierarchical Datasource binding
- Self-Referential Data binding (Flat Data)
To bind local data to the treegrid, you can assign a JavaScript object array to the DataSource property. The local data source can also be provided as an instance of the DataManager.
NOTE
By default, DataManager uses JsonAdaptor for local data-binding.
Hierarchy data source binding
The ChildMapping property is used to map the child records in hierarchy data source.
The following code example shows you how to bind the hierarchical local data into the TreeGrid control.
@Html.EJS().TreeGrid("LocalData").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(180).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();
}).AllowPaging(true).PageSettings(p => p.PageSize(7)).ChildMapping("Children").TreeColumnIndex(1).Render()public ActionResult LocalData()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
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;
}
}NOTE
- Remote data binding is not supported for Hierarchy Data.
Self-Referential data binding (Flat data)
TreeGrid is rendered from Self-Referential data structures by providing two fields, ID field and parent ID field.
-
ID Field: This field contains unique values used to identify nodes. Its name is assigned to the
IdMappingproperty. -
Parent ID Field: This field contains values that indicate parent nodes. Its name is assigned to the
ParentIdMappingproperty.
@Html.EJS().TreeGrid("SelfReferenceData").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(180).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();
}).IdMapping("TaskId").ParentIdMapping("ParentId").AllowPaging().PageSettings(p => p.PageSize(7)).TreeColumnIndex(1).Render()public ActionResult SelfReferenceData()
{
var treeData = TreeGridItems.GetSelfData();
ViewBag.datasource = treeData;
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 int? ParentId { get; set; }
public static List<TreeGridItems> GetSelfData()
{
List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateTime(2017, 10, 23), Duration = 10, ParentId = null
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 2, TaskName = "Child task 1", StartDate = new DateTime(2017, 10, 23), Duration = 4, ParentId = 1
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 3, TaskName = "Child Task 2", StartDate = new DateTime(2017, 10, 24), Duration = 5, ParentId = 1
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 4, TaskName = "Child task 3", StartDate = new DateTime(2017, 10, 25), Duration = 6, ParentId = 1
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 5, TaskName = "Parent Task 2", StartDate = new DateTime(2017, 10, 23), Duration = 10, ParentId = null
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 6, TaskName = "Child task 1", StartDate = new DateTime(2017, 10, 23), Duration = 4, ParentId = 5
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 7, TaskName = "Child Task 2", StartDate = new DateTime(2017, 10, 24), Duration = 5, ParentId = 5
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 8, TaskName = "Child task 3", StartDate = new DateTime(2017, 10, 25), Duration = 6, ParentId = 5
});
BusinessObjectCollection.Add(new TreeGridItems()
{
TaskId = 9, TaskName = "Child task 4", StartDate = new DateTime(2017, 10, 25), Duration = 6, ParentId = 5
});
return BusinessObjectCollection;
}
}NOTE
Herewith we have provided list of reserved properties and the purpose used in TreeGrid. We recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts).
| Reserved keywords | Purpose |
|---|---|
| childRecords | Specifies the childRecords of a parentData |
| hasChildRecords | Specifies whether the record contains child records |
| hasFilteredChildRecords | Specifies whether the record contains filtered child records |
| expanded | Specifies whether the child records are expanded |
| parentItem | Specifies the parentItem of childRecords |
| index | Specifies the index of current record |
| level | Specifies the hierarchy level of record |
| filterLevel | Specifies the hierarchy level of filtered record |
| parentIdMapping | Specifies the parentID |
| uniqueID | Specifies the unique ID of a record |
| parentUniqueID | Specifies the parent Unique ID of a record |
| checkboxState | Specifies the checkbox state of a record |
| isSummaryRow | Specifies the summary of a record |
| taskData | Specifies the main data |
| primaryParent | Specifies the Primary data |
NOTE
You can refer to our
ASP.NET MVC Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid exampleto knows how to present and manipulate data.