Telerik UI for Windows 8 HTML

RadDropDownList methods provide ways to interact with the control programmatically. You can search the data records, open the dropdown list, close the dropdown list, when it is opened, toggle the dropdown list and focus the control through your code. The following article displays basic examples of how to do these actions programmatically.

In order to be able to interact with the RadDropDownList, 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.DropDownList() 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="dropDownList" data-win-control="Telerik.UI.RadDropDownList"></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="searchText" type="text" />
        <input id="searchBtn" type="button" value="Search" />
    </div>
</div>
RadDropDownList Setup Copy imageCopy
dropDown = Telerik.UI.find.DropDownList("#dropDownList");

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

dropDown.dataSource = dropDownDS;
dropDown.dataTextField = "ProductName";
dropDown.dataValueField = "ProductID";
dropDown.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("searchBtn").addEventListener("click", SearchDataSource);

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

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

Open the Dropdown List Copy imageCopy
function openList() {
    dropDown.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() {
    dropDown.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() {
    dropDown.toggle();
}

To focus the control, use its focus() method. It will cause the control to be highlighted.

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

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;
    dropDown.search(searchText);
}