Telerik UI for Windows 8 HTML

There are multiple ways to interact with RadComboBox programmatically. You can open, close or toggle the dropdown list. You can force a suggestion or you can filter the DataSource and show the filtered data in the dropdown list. The following article describes how you can do these things with your code.

In order to be able to interact with the RadComboBox, you need to first initialize it and access it in your JavaScript code. The code snippets below show how you can define the control in the mark-up and get it afterwards in the code-behind. In the current example the Telerik.UI.find.ComboBox() method is used, which "casts" the control object to its proper type and you are provided with IntelliSense. You can find more information regarding the find and to method groups in this article: Enabling Telerik Controls IntelliSense.

Mark-up Copy imageCopy
<span id="comboBox" data-win-control="Telerik.UI.RadComboBox"></span>
<div id="interactionBtnsWrapper">
    <div class="interactionControls">
        <input id="openBtn" type="button" value="Open" />
        <input id="closeBtn" type="button" value="Close" />
        <input id="toggleBtn" type="button" value="Toggle" />
        <input id="focusBtn" type="button" value="Focus" />
    </div>
    <div class="interactionControls">
        <input id="suggestion" type="text" />
        <input id="suggestBtn" type="button" value="Suggest" />
    </div>
    <div class="interactionControls">
        <input id="searchText" type="text" />
        <input id="searchBtn" type="button" value="Search" />
    </div>
</div>
RadComboBox Setup Copy imageCopy
comboBox = Telerik.UI.find.ComboBox("#comboBox");

var comboBoxDS = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/Northwind/Northwind.svc/Products",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    }
});

comboBox.dataSource = comboBoxDS;
comboBox.dataTextField = "ProductName";
comboBox.dataValueField = "ProductID";
comboBox.filter = "contains";

document.getElementById("openBtn").addEventListener("click", openList);
document.getElementById("closeBtn").addEventListener("click", closeList);
document.getElementById("toggleBtn").addEventListener("click", toggleList);
document.getElementById("focusBtn").addEventListener("click", focusControl);
document.getElementById("suggestBtn").addEventListener("click", SuggestWord);
document.getElementById("searchBtn").addEventListener("click", SearchDataSource);

There are also six buttons defined. Each of the interaction methods is attached as an event handler to the corresponding button. The "Suggest" and "Search" buttons also have an input text field next to them to get string values for the methods.

To open the dropdown list programmatically, use the open() method.

Open the Dropdown List Copy imageCopy
function openList() {
    comboBox.open();
}

You can force the dropdown list to close, if it is opened, by using the close() method. Note that this method resets the search settings.

Close the Dropdown List Copy imageCopy
function closeList() {
    comboBox.close();
}

Use the toggle() method to toggle the dropdown list between its opened and closed state. Note that this method, like the close() method, resets the search settings.

Toggle the Dropdown List Copy imageCopy
function toggleList() {
    comboBox.toggle();
}

To focus the control, use its focus() method. It will cause the control to be highlighted, the insertion cursor is displayed and the user can start typing text.

Focus the Control Copy imageCopy
function focusControl() {
    comboBox.focus();
}

In order to force a suggestion on the RadComboBox use the suggest() method. It takes a string as an argument and focuses the control, populates it with the string and highlights it. In the current scenario, the suggestion string is passed as the value of an input text box.

Forcing a Suggestion Copy imageCopy
function SuggestWord() {
    var suggestion = document.getElementById("suggestion").value;
    comboBox.suggest(suggestion);
}

Use the search() method to force the control to filter its data records. The search() method takes a string as an argument and filters the DataSource based on the filter property value of the control. The result is the dropdown list is opened and populated with the filtered data.

Forcing a Search Copy imageCopy
function SearchDataSource() {
    var searchText = document.getElementById("searchText").value;
    comboBox.search(searchText);
}