ajaxToolkit:ComboBox — Things we can do clientside/using Javascript

1) I could get the “selected index” , “selected Text” using javascript.
For obtaining the “Selected value” I used server side event handlers

function pageLoad(sender, args) {
var ComboBoxCtrl = $find(‘combo1’);

$find(‘combo1’).add_propertyChanged(function (sender, e) {
if (e.get_propertyName() == ‘selectedIndex’) {
var newValue = sender.get_textBoxControl().value;
document.getElementById(“s1”).innerHTML = “Selected Item Text is: ” + “” + newValue + “”;
document.getElementById(“s1”).innerHTML += “Selected Item Index is: ” + “” + sender.get_selectedIndex() + “”;
document.getElementById(“s1”).innerHTML += “Selected Item hiddenFieldControl value is: ” + “” + sender.get_hiddenFieldControl().value + “”;
where combo1 is the ID of the ajaxToolkit:ComboBox

2) I had to use CustomValidator to get the RequiredField validation done on ajaxToolkit:ComboBox
<asp:CustomValidator ID=”cvRequired” runat=”server” OnServerValidate=”reqServerValidation”
     ClientValidationFunction=”cvComboBox_Validate” Text=”*” Display=”Dynamic”></asp:CustomValidator>

function cvComboBox_Validate(source, args) {
var ComboBoxCtrl = $find(‘combo1’);
args.IsValid = (ComboBoxCtrl.get_textBoxControl().value != ”);
return args.IsValid;
protected void reqServerValidation(object sender, ServerValidateEventArgs e)
TextBox tb = combo1.FindControl(“TextBox”) as TextBox;
if (tb.Text != “”)
e.IsValid = true;
e.IsValid = false;


3) To clear all the items from ComboBox, I needed to empty the TextBox , at OnClientClick of the required button click.
This call at the server side — “combo1.Items.Clear();” — definitely removes all items but forgets to empty the textbox.
function RemoveAll() {
var ComboBoxCtrl = $find(‘combo1’);
ComboBoxCtrl.get_textBoxControl().value = “”;

4) I could add a new item through JS/Clientside — only this way
In the Textbox part of the Combo Control, I enter some text. And next I click any submit button. I found the following code does add a new item to the combo control.
function AddItem() {
var ComboBoxCtrl = $find(‘combo1’);
var item = document.createElement(‘LI’);
item.innerHTML = ComboBoxCtrl.get_textBoxControl().value;

But I could NOT add a new list of values dynamically using javascript.
That I think should be doable server-side.

Similarly either to remove any single item OR remove all items — I had to implement server-side code.
Because Viewstate was replacing all the client side changed items.

5) On the Combo control level, I could handle other regular JS functions – like say — do something on “enter key press”.

function testFunction(sender,event) {
if (event.keyCode==13 && sender.selectedIndex < sender.length – 1) //Enter Key
//Add any custom logic here

This entry was posted in AJAXToolKit and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s