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

Local and Remote Data Binding

The DropDownTree provides options for binding it to local data arrays and remote data services.

Binding to Local Data

Local arrays are suitable for limited value options.

To initialize the DropDownTree by binding the widget to a local data array, use the Data Source component. It is an abstraction for local and remote data.

<input id="dropdowntree">

<script>
    $(document).ready(function() {
        $("#dropdowntree").kendoDropDownTree({
            dataSource: [
            {
                text: "Item 1",
                items: [
                    { text: "Item 1.1" },
                    { text: "Item 1.2" }
                ]
            },
            { text: "Item 2" }
            ]
        });
    });
</script>

Binding to Remote Data

The following example demonstrates how to create a DropDownTree and bind it to a remote HierarchicalDataSource.

<input id="dropdowntree"></input>

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

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

See Also

In this article