dataSource Object|Array|kendo.data.HierarchicalDataSource

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

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.HierarchicalDataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.HierarchicalDataSource instance the widget will use that instance and will not initialize a new one.

Example - set dataSource as a JavaScript object

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: {
            data: [
                {
                    text: "foo", items: [
                        { text: "bar" }
                    ]
                }
            ]
        }
    });
</script>

Example - set dataSource as a JavaScript array

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: [
            {
                text: "foo", items: [
                    { text: "bar" }
                ]
            }
        ]
    });
</script>

Example - set dataSource as an existing kendo.data.HierarchicalDataSource instance

<input id="dropdowntree" />

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Employees",
                dataType: "jsonp"
            }
        },
        schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
            }
        }
    });

    $("#dropdowntree").kendoDropDownTree({
        dataSource: dataSource,
        dataTextField: "FullName",
        dataValueField: "EmployeeId"
    });
</script>