New to Kendo UI for jQuery? Start a free 30-day trial

DataSource

configuration

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.

dataSource

Object|Array|kendo.data.OrgChartDataSource

<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>

<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>

<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>