Grouping Overview
The OrgChart enables you to group root nodes, or nodes that have the same parent. To group the nodes, set the GroupField configuration of the OrgChart. Pass the name of the data field that datermines the groups.
The following example demonstrates how to group the OrgChart nodes by the Group field.
@(Html.Kendo().OrgChart<TelerikMvcApp1.Models.OrgChartEmployeeViewModel>()
.Name("orgchart")
.GroupField("Group")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "Home"))
.Model(m =>
{
m.Id(f => f.ID);
m.ParentId(f => f.ParentID);
m.Name(f => f.Name);
m.Title(f => f.Title);
m.Avatar(f => f.Avatar);
m.Expanded(f => f.Expanded);
})
)
)
<kendo-orgchart name="orgchart" group-field="Group">
<orgchart-datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("Read","Home")" />
</transport>
<schema>
<orgchart-model id="ID"
parent-id="ParentID"
name="Name"
title="Title"
avatar="Avatar"
expanded="true">
<fields>
<field name="ID" type="number"></field>
<field name="ParentID" nullable="true"></field>
<field name="Name" type="string"></field>
<field name="Title" type="string"></field>
<field name="Avatar" type="string"></field>
</fields>
</orgchart-model>
</schema>
</orgchart-datasource>
</kendo-orgchart>
public JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
List<OrgChartEmployeeViewModel> data = new List<OrgChartEmployeeViewModel>()
{
new OrgChartEmployeeViewModel() { ID = 1, Name = "Clevey Thrustfield", Title = "CEO", Group = "CEO", ParentID = null, Expanded = true, Avatar = "../content/web/orgchart/people/1.jpg" },
new OrgChartEmployeeViewModel() { ID = 2, Name = "Sean Russel", Title = "Financial Manager", Group = "Chief Officers", ParentID = 1, Expanded = true, Avatar = "../content/web/orgchart/people/2.jpg" },
new OrgChartEmployeeViewModel() { ID = 3, Name = "Andrew Berry", Title = "Team Lead", ParentID = 1, Group = "Chief Officers", Expanded = true, Avatar = "../content/web/orgchart/people/3.jpg" },
new OrgChartEmployeeViewModel() { ID = 4, Name = "Dilyana Newman", Title = "Accountant", Group = "Accountants", ParentID = 2, Expanded = false, Avatar = "../content/web/orgchart/people/4.jpg" }
};
return Json(data);
}