Kendo UI for jQuery

jQuery OrgChart

  • Effortlessly create professional organizational charts with the this jQuery component. Includes grouping, load on demand, templates, keyboard navigation and much more.
  • Part of the Kendo UI for jQuery library along with more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
_Original Kendoka_3
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The jQuery OrgChart component allows users to view organizational structures and navigate to people or positions they wish to learn more about. This component visualizes hierarchical data and allows expansion and collision of multiple nodes for easy naviagtion.

    See the jQuery OrgChart demo

    jQuery Org Chart Component Overview
  • Data Binding

    Bind the jQuery OrgChart to local arrays or virtualy any remote data source using the include Data Source library.

    See the jQuery OrgChart Data Binding demo

  • Load on Demand

    With performance in mind, the jQuery OrgChart includes a load on demand feature to help with large data sets.  Rather than loading the entire data set at once, the component will load nodes as they are expanded. 

    See the jQuery OrgChart Load on Demand demo

    org-chart-loading
  • Grouping

    Items in the jQuery OrgChart can be grouped in two different ways: 

  • Editing

    Allow your users to edit records directly in the organizational chart. All CRUD operations are exposed through a menu that is opened by clicking on an icon in each item. Once in edit mode, the user can change the item’s parent, name, title, and avatar.

    See the jQuery OrgChart Editing demo

  • Templates

    To allow further customization, the jQuery OrgChart component supports two types of templates—Template and GroupHeaderTemplate. Using TemplateId enables you to render custom content in the body of the node, while with the GroupHeaderTemplateId, you can customize the node header. 

    See the jQuery OrgChart Templates demo

  • RTL Support

    Right out of the box, the jQuery OrgChart provides RTL support for languages such as Arabic and Hebrew. You can adjust for local preference by changing just a few settings.

    See the jQuery Scheduler RTL Support demo

    rtl-support
  • Keyboard Navigation

    The Kendo for jQuery UI OrgChart allows your users to use the keyboard for almost any action they can trigger with the mouse, including navigating to a different view, traversing the visible appointments, creating a new item, opening an existing item and more.

    See the jQuery Scheduler Keyboard Navigation demo

    keyboard-navigation