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.