Infragistics WebCombo Javascript API Demonstration

In this blog I will demonstrate how to interact with WebCombo client side API using Javascript. Now Let's begin with an example.

As shown above figure, there are several WebCombos on the page. When the right-hand checkbox is checked, the WebCombo is enabled anf get focus; otherwise,the WebCombo is disabled and lost focus.

1. Retrieve WebCombo Object Reference

To interact with the client side WebCombo object, we need a way to get a reference to it. We can retrieve a WebCombo client side object reference via a global function call: igcmbo_getComboById("SomeComboId"). Here "SomeWomboId" is the ID of the WebCombo control.

2. Disable / Enable WebCombo Control

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

serviceCombo.Element.disabled = true; // disable

serviceCombo.inputBox.disabled = true; // disable

serviceCombo.Element.disabled = false; // enable

serviceCombo.inputBox.disabled = false; // enable

3. Set Focus on WebCombo Control

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

ServiceCombo.focus();

or

ServiceCombo.inputBox.focus();

4. Select a Row by matching DataValue

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

serviceCombo.setDataValue(targetDataValue);

5. Select a Row by matching DisplayValue

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

serviceCombo.setDisplayValue(targetDisplayValue);

6. Get DataValue of selected WebCombo Row

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

var selectedValue = serviceCombo .getDataValue();

7. Get DisplayValue of selected WebCombo Row

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

var selectedText = serviceCombo .getDisplayValue();

8. Clear the Selected Row of WebCombo

var serviceCombo = igcmbo_getComboById("ServiceWebCombo");

serviceCombo.setDisplayValue("");

alert(ServiceCombo.getSelectedIndex()); // -1

References:

http://help.infragistics.com/Help/NetAdvantage/ASPNET/2009.1/CLR3.5/html/WebCombo_Object_CSOM.html