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