Data Binding

The DropDownList enables you to initialize it by using the <input> or the <select> element after you bind it to local data arrays or remote data services.

For more information on initializing the DropDownList through the <option> tag of an existing <select> element, refer to the DropDownList Overview article.

When you configure the local or remote data source of the DropDownList, enabling the paging functionality and setting pageSize is efficient only when you use paging together with virtualization. In all other cases, enabling paging and setting pageSize is considered as incorrect configuration.

Binding to Local Data

To initialize the DropDownList by binding the widget to a local data array and then utilizing the <input> or the <select> element, use the Kendo UI Data Source. The Data Source component is an abstraction for local and remote data. Local arrays are appropriate for limited value options.

   <input id="dropdownlist">

    <script>
      $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
          ]
        });
      });
    </script>

Binding to Remote Data

To initialize the DropDownList by binding the widget to remote data arrays and then utilizing the <input> or the <select> element, use the Kendo UI Data Source. The Data Source component is an abstraction for local and remote data. Remote data binding is appropriate for larger data sets so that items can be loaded on demand when they are displayed. You can use the Data Source for serving data from a variety of data services such as XML, JSON, and JSONP. For a complete example, refer to the demo on binding the DropDownList to remote data.

    <input id="dropdownlist">

    <script>
        $(document).ready(function() {
            $("#dropdownlist").kendoDropDownList({
                index: 0,
                dataTextField: "ContactName",
                dataValueField: "CustomerID",
                dataSource: {
                    type: "odata", // specifies data protocol
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    }
                }
            });
        });
    </script>

See Also

In this article
Not finding the help you need? Improve this article