OrgChart Overview

The Kendo UI OrgChart allows you to view and interact with an organizational structures. It gives the possibility to easily visualize hierarchies and is very useful in scenarios like what teams employees are part of and who they report to.

It provides a tree-like structure where the user can edit the individual items, change the items parent, or group the nodes in the tree.

Kendo UI for jQuery Kendoka image

The OrgChart is part of Kendo UI for jQuery, 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.

Initializing the OrgChart

The following example demonstrates how to initialize the OrgChart from an existing <div> element.

    <div id="orgchart"></div>

    <script>
        var data = [
            { id: 1, name: "Gevin Bell", title: "CEO"},
            { id: 2, name: "Clevey Thrustfield", title: "COO", parentId: 1},
            { id: 3, name: "Carol Baker", title: "CFO", , parentId: 1 },
            { id: 4, name: "Kendra Howell", title: "CMO", , parentId: 1},
            { id: 5, name: "Sean Rusell", title: "Financial Manager", parentId: 3},
            { id: 6, name: "Steven North", title: "Senior Manager", , parentId: 3 },
            { id: 7, name: "Michelle Hudson", title: "Operations Manager", parentId: 2},
            { id: 8, name: "Andrew Berry", title: "Accountant", parentId: 5 }            
        ];

        $("#orgchart").kendoOrgChart({
            dataSource: data
        });
    </script>

Functionality and Features

Referencing Existing Instances

To get a reference to an existing OrgChart instance:

  1. Use the jQuery.data() method.
  2. Once a reference is established, use the OrgChart API to control its behavior.

    var orgchart = $("#orgchart").data("kendoOrgChart");
    

See Also

In this article
Not finding the help you need? Improve this article