Kendo UI for jQuery 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.
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:
- Use the
jQuery.data()method. -
Once a reference is established, use the OrgChart API to control its behavior.
var orgchart = $("#orgchart").data("kendoOrgChart");