OrgChart Overview

The OrgChart is part ofTelerik 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.

Download Free 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.

• Demo page for the OrgChart HtmlHelper

• Demo page for the OrgChart TagHelper

Basic Configuration

The following example demonstrates the basic configuration of the OrgChart component.

@(Html.Kendo().OrgChart() .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">                

public JsonResult Read([DataSourceRequest] DataSourceRequest request) { List data = new List() { 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

• Binding
• Editing
• Grouping
• Templates
• Accessibility

Events

You can subscribe to all OrgChartevents. For a complete example on the OrgChart events, refer to theOrgChart 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") ) ) 

< kendo-orgchart name = " orgchart "选择= " onSelect" on-change="onChange">  

See Also

• Basic Usage of the OrgChart HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the OrgChart TagHelper for ASP.NET Core (Demo)

• Using the API of the OrgChart for ASP.NET Core (Demo)

• Server-Side API
• JavaScript API Reference of the OrgChart