ASP.NET Core OrgChart Overview
The OrgChart is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI OrgChart TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI OrgChart widget.
The OrgChart is a flexible organizational chart component designed to represent a structure of an organization. The OrgChart can illustrate the hierarchy in a company, department, team, or other hierarchical structures.
Basic Configuration
The following example demonstrates the basic configuration of the OrgChart component.
@(Html.Kendo().OrgChart<Kendo.Mvc.Examples.Models.OrgChartEmployeeViewModel>()
.Name("orgchart")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "OrgChart"))
.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">
<orgchart-datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("Read","OrgChart")" />
</transport>
<schema>
<orgchart-model id="ID"
parent-id="ParentID"
expanded="true"
name="Name"
title="Title"
avatar="Avatar">
<fields>
<field name="ParentID" nullable="true"></field>
<field name="ID" type="number"></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", ParentID = null, Expanded = true, Avatar = "../content/web/orgchart/people/1.jpg" },
new OrgChartEmployeeViewModel() { ID = 2, Name = "Sean Russel", Title = "Financial Manager", ParentID = 1, Expanded = true, Avatar = "../content/web/orgchart/people/2.jpg" },
new OrgChartEmployeeViewModel() { ID = 3, Name = "Andrew Berry", Title = "Team Lead", ParentID = 1, Expanded = true, Avatar = "../content/web/orgchart/people/3.jpg" },
new OrgChartEmployeeViewModel() { ID = 4, Name = "Dilyana Newman", Title = "Accountant", ParentID = 2, Expanded = false, Avatar = "../content/web/orgchart/people/4.jpg" }
};
return Json(data, JsonRequestBehavior.AllowGet);
}
Functionality and Features
Events
You can subscribe to all OrgChart events. For a complete example on the OrgChart events, refer to the OrgChart Events Demo.
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().OrgChart()
.Name("orgchart")
.Events(e => e
.Select("onSelect")
.Change("onChange")
)
)
<script>
function onSelect(e) {
// Handle the "select" event.
}
function onChange(e) {
// Handle the "change" event.
}
</script>
<kendo-orgchart name="orgchart"
on-select="onSelect"
on-change="onChange">
</kendo-orgchart>
<script>
function onSelect(e) {
// Handle the "select" event.
}
function onChange(e) {
// Handle the "change" event.
}
</script>