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

Client-side Programming Overview

RadComboBox provides a flexible client-side API. You can easily interact with RadComboBox 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 postbacks.

Getting the RadComboBox Client-side Object

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


var combo = $find("<%= RadComboBox1.ClientID %>");

Getting the Instance of a Particular RadComboBoxItem

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


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

Cancelling an Event

Several client-side events occur immediately before RadComboBox performs an action. Most of these events have names that end with "-ing". You can use these events to cancel the RadComboBox's action by using the set_cancel method of the eventArgs that are passed to the handler:


function OnClientSelectedIndexChanging(sender, eventArgs) {
    eventArgs.set_cancel(true);
}

Calling a Client-side Method

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

  • showDropDown()

function ShowDropDownFunction() {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.showDropDown();
}

  • hideDropDown()

function HideDropDownFunction() {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.hideDropDown();
}

  • disable()

function DisableComboBox() {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.disable();
}

  • enable()

function EnableComboBox() {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.enable();
}

  • RadComboBoxItem.select()

function SelectComboBoxItem(itemText) {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    var item = combo.findItemByText(itemText);
    if (item) {
        item.select();
    }
}

Preserving Changes

By default, changes made in client-side code do not persist over a postback to the server. To preserve changes, you must use the trackChanges and commitChanges methods, as shown in Example 1:

Example 1: Adding an item on the client-side and persisting the change over a postback to the server.


function AddNewItem() {
    var combo = $find("<%= RadComboBox1.ClientID %>");
    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
    comboItem.set_text("item");
    combo.trackChanges();
    combo.get_items().add(comboItem);
    comboItem.select();
    combo.commitChanges();
}

This approach does not affect Items loaded on demand. By design, they are lost after postback.

Getting All RadComboBox Instances on the Client-side

RadComboBox exposes an array on the client-side that contains all RadComboBox instances. You can access this array using syntax like this: Telerik.Web.UI.RadComboBox.ComboBoxes.

If RadComboBox controls are embedded in another control, you can simply get these controls from the array using code like Example 2.

Example 2: Finding all RadComboBox instances on the page.


<script>
    function pageLoad() {
        var combo1 = Telerik.Web.UI.RadComboBox.ComboBoxes[0];
        var combo2 = Telerik.Web.UI.RadComboBox.ComboBoxes[1];
        var combo3 = Telerik.Web.UI.RadComboBox.ComboBoxes[2];
    }
</script>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" ...>    
    ...     
    <EditItemTemplate>        
    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server"></telerik:RadComboBox>        
    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server"></telerik:RadComboBox>        
    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox3" runat="server"></telerik:RadComboBox>    
    </EditItemTemplate>   
     ...
</telerik:RadGrid>

Next Steps

Access client-side changes at the server

Explore the RadComboBox client-side events

See Also

In this article