Telerik UI for Windows 8 HTML

This article will introduce you to the specifics of binding RadDropDownList and presenting its options to the user.

Data-binding

The RadDropDownList can be bound to both local arrays and remote data via the DataSource component; an abstraction for local and remote data. Local arrays are appropriate for limited value options, while remote data binding is better for larger data sets. With remote data-binding, items will be loaded on-demand; when they are displayed.

The properties used to bind the RadDropDownList are:

  • autoBind: A Boolean property indicating whether the control should be bound to the dataSource on initialization.

  • dataSource: Specifies the object from which RadDropDownList will fetch its items.

  • dataTextField: Gets or sets the field from the dataSource which will be used to provide text for the dropdown list items.

  • dataValueField: Gets or sets the field from the dataSource which will be used to populate the items value.

Below you can see examples of binding RadDropDownList to local and remote sources.

Local Source

To bind RadDropDownList locally, you can set the dataSource property to a local array.

Local source Copy imageCopy
var localSourcesDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById("localSourcesDropDown"), {
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Item1", value: "1" },
        { text: "Item2", value: "2" }
    ]
});

Remote Sources

Binding to DataSource

The easiest way to bind a RadDropDownList to remote suggestions is to use the DataSource component (Telerik.Data.DataSource)—an abstraction for local and remote data. The DataSource component can be used to serve data from data services, such as XML and JSON.

Using DataSource Copy imageCopy
var dataSourceDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById("dataSourceDropDown"), {
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    filter: "contains",
    dataSource: {
        transport: {
            read: {
                url: "http://services.odata.org/Northwind/Northwind.svc/Products",
                dataType: "json"

            }
        },
        schema: {
            data: "value"
        },
        sort: { field: "ProductName", dir: "asc" }
    }
});

Binding to List

Another option is to request the data manually through the WinJS.xhr function and populate the results in a WinJS.Binding.List object. An example is shown below:

Using WinJS.Binding.List Copy imageCopy
var categoriesList = new WinJS.Binding.List();
WinJS.xhr({
    url: "http://services.odata.org/Northwind/Northwind.svc/Categories?$format=json",
}).then(function (result) {
    var categories = JSON.parse(result.response).value;
    categories.forEach(function (category) {
        categoriesList.push({
            categoryId: category.CategoryId,
            categoryName: category.CategoryName
        });
    });
}
);

var listDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById('listDropDown'), {
    dataSource: categoriesList,
    dataTextField: "categoryName",
    dataValueField: "categoryId"
});

Presenting the Options

You can use the properties below to modify the way the user interacts with the dropdown list control:

  • enabled: Gets or sets the enabled state of the control. You can use it when you want to prevent selecting an item in RadDropDownList. For example, if the user has to perform another action before being able to write and choose a suggestion.

  • height: Use this property to set the dropdown list height in pixels.

  • index: By setting this property to a numeric value , you can specify which item in the dropdown list will be selected. The index is zero-based.

  • optionLabel: Set this property value to some string and it will be displayed in a default empty item in the dropdown list.

    Options Label
  • readonly: Gets or sets whether the RadDropDownList is read-only.

  • text: Use this property to define the text of the control, when its autoBind property is set to false.

  • value: Use this property to define the value of the control.

Local source Copy imageCopy
var customPresentingDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById("customPresentingDropDown"), {
    dataSource: categoriesList,
    dataTextField: "categoryName",
    dataValueField: "categoryId",
    optionLabel: "Pick a category..."
});

Focusing the control

Since Q2 2013, RadDropDownList exposes a focus() method. You can use it to programatically focus a control and allow the user to directly navigate through its options.

See Also