ASP.NET Core OrgChart Overview

Telerik UI for ASP.NET Core Ninja image

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.

        .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);
    <kendo-orgchart name="orgchart">
        <orgchart-datasource type="DataSourceTagHelperType.Ajax">
                <read url="@Url.Action("Read","OrgChart")" />
                <orgchart-model id="ID" 
                        <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>
    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);

Functionality and Features

  • Binding—You can bind the OrgChart to local or remote data.
  • Editing—The OrgChart provides a built-in editing functionality, which is enabled by default.
  • Grouping—The OrgChart enables you to group root nodes or nodes that have the same parent.
  • Templates—The OrgChart allows you to customize its nodes and group headers by using Kendo Templates.
  • Accessibility—The OrgChart is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

Next Steps

See Also

In this article