dataSource Object|Array|kendo.data.OrgChartDataSource

The data source of the widget which is used to render the OrgChart items. Can be a JavaScript object which represents a valid kendo.data.OrgChartDataSource configuration, a JavaScript array, or an existing kendo.data.OrgChartDataSource instance.

  • If the dataSource option is set to a JavaScript object or an array, the widget will initialize a new kendo.data.OrgChartDataSource instance and will use that value as the DataSource configuration.
  • If the dataSource option is an existing kendo.data.OrgChartDataSource instance, the widget will use that instance and will not initialize a new one.

Example - Initializing dataSource with an array

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

<script>
    $("#orgchart").kendoOrgChart({
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

Example - Initializing dataSource with an JavaScript object

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

<script>
    $("#orgchart").kendoOrgChart({
        dataSource: {
            data: [
                { id: 1, name: "Jane", title: "Boss", expanded: true },
                { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
                { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
                { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
            ]
        }
    });
</script>

Example - Passing existing OrgChartDataSource instance

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

<script>
    var ds = new kendo.data.OrgChartDataSource({
        data: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });

    $("#orgchart").kendoOrgChart({
        dataSource: ds
    });
</script>
In this article