Telerik UI for Windows 8 HTML
Contents

This article will introduce you to the specifics of binding RadComboBox, filtering its results and presenting them to the user. We will cover:

Data-binding

The RadComboBox 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 RadComboBox are:

  • autoBind: A Boolean property indicating whether the control should be bound to the dataSource on initialization. Its default value is true.

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

  • dataTextField: Gets or sets the field from the dataSource which will be used to provide text for the combobox 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 RadComboBox to local and remote sources.

Local Sources

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

Local sources Copy imageCopy
var localSourcesComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("localSourcesComboBox"), {
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Item1", value: "1" },
        { text: "Item2", value: "2" }
    ]
});

Remote Sources

Binding to DataSource

The easiest way to bind a RadComboBox to remote suggestions is to use the DataSource component (Telerik.Data.DataSource) - an abstraction for local and remote data. Your application can use the DataSource component to serve data from online data services, such as XML and JSON.

Binding to DataSource Copy imageCopy
var dataSourceComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("dataSourceComboBox"), {
    index: 0,
    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:

Binding to List Copy imageCopy
var customersSource = new WinJS.Binding.List();
WinJS.xhr({
    url: "http://services.odata.org/Northwind/Northwind.svc/Customers?$format=json",
}).then(function (result) {
    var customers = JSON.parse(result.response).value;
    customers.forEach(function (customer) {
        customersSource.push({
            name: customer.CompanyName,
            id: customer.CustomerID
        });
    });
}
);

var listComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById('listComboBox'), {
    dataSource: customersSource,
    dataTextField: "name",
    dataValueField: "id"
});

Note that using this approach, you will load all data entries locally, once you populate the list.

Filtering the Results

You can control when and how RadComboBox will perform a filtering for the items displayed in it. The following properties help you achieve this:

  • delay: The delay in milliseconds after which the control will start filtering the dataSource. Using this property, you can postpone the filtering, allowing the user to type in more text before RadComboBox starts filtering its source.

  • filter: Sets the filter function used when filtering the data. The meaningful values that you can use are "eq" (equals), "contains" (contains) and "startswith" (starts with).

  • ignoreCase: A Boolean type property indicating whether or not search should be case-sensitive.

  • minLength: The minimum amount of characters that should be typed before RadComboBox filters its data source. This way you can perform search on more specific criteria.

Filtering the Results Example Copy imageCopy
var filteredComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById('filteredComboBox'), {
    dataSource: customersSource,
    dataTextField: "name",
    dataValueField: "id",
    delay: 1500,
    filter: "startsWith",
    ignoreCase: false,
    minLength: 2
});

Presenting the Suggestions

Based on your requirements, you can provide different settings for fascilitating the user's interaction with the control. They include:

  • autoSuggest: Auto-completes the rest of the text in the text input area while the user is typing. The value used to complete the entry is the first one matching the current criteria.

    AutoSuggest feature

  • enabled: Gets or sets the enabled state of the control. You can use it when you want to prevent selecting an item in RadComboBox, 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 RadComboBox's dropdown list height in pixels.

  • highlightFirst: A Boolean value indicating whether the first item should automatically be marked for selection. Pressing Enter while typing in this case will select the item.

    Highlight first item feature

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

  • readonly: Gets or sets whether the RadComboBox 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.

Presenting the suggestions Copy imageCopy
var customPresentingComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById('customPresentingComboBox'), {
    dataSource: customersSource,
    dataTextField: "name",
    dataValueField: "id",
    highlightFirst: true,
    autoSuggest: true
});

Focusing the control

Since Q2 2013, RadComboBox exposes a focus() method. You can use it to programatically focus a control and allow the user to directly start typing in it.