|
|
        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 SourcesTo bind RadComboBox locally, you can set the dataSource property to a local array. Local sources | Copy |
---|
var localSourcesComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("localSourcesComboBox"), {
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
|
Remote SourcesBinding 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 |
---|
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 |
---|
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 |
---|
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.
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.
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 |
---|
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.
|