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