WebCombo in Grid Cell

Editing of coded columns should allow the user to request a drop-down-list and select an entry. The UltraWebGrid allows the developer to place a UltraWebCombo control over a grid cell and use the same control as the value list. This allows a code column to display with descriptive text and allows the user to select entries from a drop-down-list.

Additional Information

Questions
How do I display the CompanyName for a column containing a CustomerID ?
How do I allow the user to select the CompanyName from a drop-down-list for a column containing a CustomerID?
Solution
If the grid or column is display only (no editing), the CompanyName can be displayed in a column containing a CustomerID by using a ValueList. See tutorial Value Lists. If the column is editable, The CompanyName can be displayed in a column containing a CustomerID by setting the value list to a web combo control.
To provide a multi-column drop-down-list for a column, set the value list to a WebCombo control.

Step-By-Step Example

This sample project retrieves the Northwind Orders database and binds an UltraWebCombo control to the CustomerID column to display the CompanyName. The UltraWebCombo control is populated with values from the Northwind Customers table and displays as a multi-column drop-down when the user selects the cell for editing.

Code Discussion

Web_Combo_In_Grid_Cell.aspx
Web_Combo_In_Grid_Cell.aspx contains the code relevant to this project and consists of the following code regions:
Page Events

The Page Events Region contains the following event handlers:
Page_Load - The Page_Load event contains code to retrieve the Northwind Orders and Customers and bind them to the grid and combo. First, declare a new data connection and retrieves the connection string:

Declare a data adapter to retrieve the CustomerID and CustomerName fields from the Customers database. Declare a new data table and fill it with data. Tell the web combo control which column to use as the DataValueColumn and which column to use as the DisplayValueColumn, set the data source to the Customers data table and bind the data to the control.

Declare a data adapter to retrieve rows from the Orders database. Declare a new data table and fill it with data using the data adapter. Set the data source of the grid to the data table and bind the data to the grid.

UltraWebGrid Events

The UltraWebGrid Events Region contains the following event handlers:
UltraWebGrid1_InitializeLayout - The UltraWebGrid InitializeLayout event contains code to set the layout properties of the control:

To make the grid editable, set the CellClickAction property to Edit and set the AllowUpdate property to Yes

To bind the web combo to the CustomerID column, set the Type property to DropDownList, set the ValueList.WebCombo control to the WebCombo1 control. To set the column to display the text rather than the value, set the DisplayStyle property to DisplayText.

Format the date columns to make them look a little better.

UltraWebCombo Events

The UltraWebCombo Events Region contains the following event handlers:
WebCombo1_InitializeLayout - The web combo control defaults the column widths to about 100 pixels. To display more of the CompanyName column, set the width to about 300 pixels:

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

Alternative to embedding a large Valuelist or WebCombo with many records inside a WebGrid

Depending on the nature of the Web Application, a requirement may be to allow a user to select from a list of available items. Sometimes this list can be extremely large. Whenever a list is this large, the user experience will be diminished due to performance constraints imposed by current technology. Imagine how slow a web page will be if you load a few thousand rows into a dropdown. This article will illustrate an alternative means of providing the user with a list of selectable items by using a JavaScript Popup window that contains a WebGrid.

The design approach will be as follows:

1. Create the main web page that will contain the editable WebGrid
a. The WebGrid will contain an extra unbound column that will be used instead of a Valuelist or WebCombo column.
b. The Cell contents of this column will contain JavaScript Hyperlinks that will launch our Popup Web Page that contains the List.

2. Create another Web Page that contains a WebGrid
a. The WebGrid on this page will be used as a read-only selectable list.
b. The WebGrid will also implement Paging so that many rows can be loaded and easily navigable.
c. This Web Page will contain JavaScript code that will identify a selected row in the WebGrid and
then copy the contents of the currently selected row into the currently selected row on the other page’s WebGrid.

Step-By-Step Example Here is a process flow of the required logic to make this all happen: 1. Load Main Web Page with populated Main WebGrid. 2. Click on Hyperlink in the row that is to be edited. 3. Popup Web Page with WebGrid list is launched. 4. Navigate to the record you wish to select. 5. Select the desired row. 6. Click “Select” client side button. a. The Click is connected to a JavaScript function that gets the Active WebGrid row on the current Web Page. b. The JavaScript function also gets the current active row from the main Web Page. c. The JavaScript function then copies the corresponding cell items from the current page row to the corresponding cell items in the main page’s active row. 7. The List page closes. 8. Click “Submit” to persist the changes. 9. Use your preferred methodology to persist the additions and updates. Thoughts about enhancements: The Popup page can be fully customized to provide a fully searchable and sortable list that can make it very simple for a user to locate the record of interest. Edit boxes can be placed on the form that allows a user to type in a few key that can be used as arguments for a database query. The resulting records can then be bound to the Web Grid list to further enhance the User experience. Review: With this technique it is now possible to have a large list of items for our users to select from and still maintain good performance levels. For a complete working implementation of the concepts discussed in this article, please download the included samples. The included samples contain the code and comments to get started. Please run the Project Upgrade Utility on the samples before loading them into Visual Studio.

Manually Drop Down the WebCombo

The dropdown area of WebCombo can be programmatically displayed on the client side using the following code.

In this example, a button control is added to the page and a javascript handler is setup to call the WebCombo.setDropDown method.

The variable used to reference the WebCombo, (oWebCombo1) is automatically generated to the page based on the name of the control on the server.

In Html

onclick="javascript:ShowDropDown()"
value='Show DropDown'>

In JavaScript