WebCombo With ValueList

The WebCombo control can be used as a dropdown selection editor inside of a cell.

Additional Information

This capability is utilized as follows:

With WebGrid on a form, add a WebCombo control to the form as well.

The BorderStyle of the WebCombo should be set to None for an improved appearance within WebGrid cells.

The WebCombo control can be configured and bound to data in any of the normal ways availabe to that control. A typical way of utilizing a cell dropdown is to display a human readable version of a column that is a foreign key of another table. In our example we will use the Products and Categories tables of the NWind.mdb database that installs with the product. For a complete working example of the code described in this article, see the ValueLists sample, second page: WebGrid with WebCombo ValueList.

Add a database connection for the NWind database. Add oleDbDataAdapters for the Products and Categories tables. Create a dataset to contain the two tables.

Connect the WebGrid DataSource property to dataSet11 and the DataMember to the Products table. Edit the WebGrid columns for the Products table so that the HeaderText property for the CategoryID column reads CategoryName, as this is what the effect will be once WebCombo is attached to this column.

Connect the WebCombo DataSource property to dataSet11 and the DataMember to the Categories table. Edit the WebCombo columns collection for the Categories table so that the CategoryID column's Hidden property is set to True. You don't need to see this column at all since the CategoryName column is what will be used to select the value.

Set the WebCombo DataTextField property to CategoryName. This tells WebCombo which column to place in the top portion when a row is selected from the dropdown.

Set the WebCombo DataValueField property to CategoryID. This tells WebCombo which column to use as the actual value of the control. The DataTextField and the DataValueField are used together by WebGrid to display the first and update the second as part of database processing.

In the code behind file, add the following code to make the connection between WebGrid and WebCombo:


UltraWebGrid1.Columns.FromKey("CategoryID").AllowUpdate = AllowUpdate.Yes;
UltraWebGrid1.Columns.FromKey("CategoryID").Type = ColumnType.DropDownList;
UltraWebGrid1.Columns.FromKey("CategoryID").ValueList.WebCombo = WebCombo2;

UltraWebGrid1.Columns.FromKey("CategoryID").AllowUpdate=AllowUpdate.Yes UltraWebGrid1.Columns.FromKey("CategoryID").Type=ColumnType.DropDownList UltraWebGrid1.Columns.FromKey("CategoryID").ValueList.WebCombo = WebCombo1