New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Programming Overview

RadDropDownList provides a flexible client-side API. You can easily interact with RadDropDownList in the browser using its client-side object. In addition to a variety of client-side events, the client-side object model lets you achieve complicated tasks while avoiding unnecessary post-backs.

Getting the RadDropDownList client-side object

RadDropDownList creates a client-side object with its ClientID. You can obtain the reference using the following JavaScript code:

var dropdownlist = $find("<%= RadDropDownList1.ClientID %>");

Getting an instance of a particular RadDropDownListItem

Once you have the client-side object of RadDropDownList, you can use the findItemByText()/findItemByValue method to get the instance of a particular item:

var dropdownlist = $find("<%= RadDropDownList1.ClientID %>");
var item = dropdownlist.findItemByText(text);

Cancelling an action

Several client side events occur immediately before the RadDropDownList performs some action. These events all have names that end in "-ing". You can use these events to cancel the action by using the set_cancel method of the second argument passed to the handler:

function onClientDropDownClosing(sender, eventArgs) {

Validating a selection

You can validate the selection of a DropDownList by using the get_selectedItem() method:

function ValidateDropDownList(sender, args) {
    var isSelected = false;
    var dropDown = $find("<%= RadDropDownList1.ClientID %>");

    var selectedItem = dropDown.get_selectedItem();

    if (selectedItem) {
        var selectedText = selectedItem.get_text();
        alert("The selected item's text is " + selectedText);
        isSelected = true;
    else {
        alert("Select an item!");

    return isSelected;

Calling a client-side method

When you get the instance of RadDropDownList object, you can call client-side methods to perform certain tasks. Consider the following examples:

  • openDropDown()

function OpenDropDownFunction() {
    var dropdownlist = $find("<%= RadDropDownList1.ClientID %>");

  • closeDropDown()

function CloseDropDownFunction() {
    var dropdownlist = $find("<%= RadDropDownList1.ClientID %>");

  • set_enabled(value)

function EnableDropDownList() {
    var dropdownlist = $find("<%= RadDropDownList1.ClientID %>");

In this article