Infragistics WebCombo Data Binding

Infragistics ASP.NET web controls are very usful and populate by web page developers. In this series articles I will share my expierences on Infragistics controls usage with you. The topic of this blog is how to bind WebCombo to a data source.

You can bind WebCombo to an ArrayList, Object Collection or DataTable, and it supports binding to single column and multiple columns. Now let's look an example.

1. Bind To a DataTable With Single Column Visible

The ASP.NET page looks like below:

All the WebCombo controls bind to a DataTable which load data from the database. The DataTable has 2 fields - one for DisplayValue and the other for DataValue of the WebCombo control. Follow mw as the following steps.

Select the WebCombo control, in the Properties window, click "..." button on the "Column" property to open the "Column Collection Editor" window, as shown above.

Remove the default column 0 first, because clolumn name did not update while you assign "Key" and "BaseColumnName" to it.

Now click "Add" button to add new columns. Follow the steps from 1 to 4 shown as above figure.

BaseColumnName - the name of the column in the data store

Key - A unique string identifier for this column within the Columns collection.

Hiden - Determines whether a column is hidden from view. Default is False.

In this example we need the "Code" column to be visible and "ID" column invisible, so I set Hidden = False for "Code" column and Hidden = True for "ID" column.

After "Code" and "ID" columns added, click "OK" button. Now you can see a dropdownlist containing "Code" and "ID" when you click "DataTextField" and "DataValueField" property of the WebCombo control in the Properties window. Select "Code" for DataTextField property and "ID" for DataValueField property.

DataTextField - Specifies the column name from the dropdown that will be used to display the text content of the top portion of the WebCombo.

DataValueField - Specifies the column name from the dropdown that will be used as the source for the DataValue of the WebCombo control.

Next we need to set other properties of the WebCombo control, as shown below.

So far the only thing to do is write few lines of code to bind to data source, as below.

Public Shared Sub BindWebCombo(ByRef control As WebCombo, ByRef dataSource As DataTable)
With control
' data bingding
.DataSource = dataSource
.DataBind()
End With
End Sub

2. Bind To a DataTable With MultilpeColumns Visible

Bind to multiple columns is very similar with the steps above. Let's see what the difference is.

a. Set "ColHeadersVisible" property to be "Yes".

b. Set value for Caption property of Column Header.

c. set Hidden property to be "False" (see figure above)

The page now look like below.