Edit this page

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 some action. Most of these events all 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 passed to the handler:

function OnClientSelectedIndexChanging(sender, eventArgs) {

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 %>");

  • hideDropDown()

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

  • disable()

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

  • enable()

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

  • RadComboBoxItem.select()

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

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();


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:


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.

    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];
<telerik:RadGrid ID="RadGrid1" runat="server" ...>    
    <telerik:RadComboBox ID="RadComboBox1" runat="server"></telerik:RadComboBox>        
    <telerik:RadComboBox ID="RadComboBox2" runat="server"></telerik:RadComboBox>        
    <telerik:RadComboBox ID="RadComboBox3" runat="server"></telerik:RadComboBox>    

See Also