Creating a Large List Selector
Solution ApproachIn some applications, end users may have to choose a value from a list of thousands or perhaps millions of values. These values cannot be realistically displayed in a dropdown list or a listbox on a web page. When the number of values exceeds 500, Iron Speed Designer automatically creates a default Large List Selector. The number of items before a large list selector is displayed can be changed by modifying the MaxGeneratedItems pass-through attribute property. However, the default large list selector may not be ideal in all situations because you may want to display additional columns, or provide different searching and filtering capabilities than provided by the default large list selector. This is fairly easy to accomplish in Iron Speed Designer. You can create a custom Show Table page and use this as a custom large list selector by making slight modifications to the layout.
This example shows how to create a “Customer Selector” page that can be displayed in a popup window, and that contains links that populate a text box in the opening page when clicked. This example is part of the AcmeOMS sample application included with Iron Speed Designer.
The Add Order page below was modified to display a Text Box for the Customer field followed by a Lookup hyperlink. The Lookup hyperlink will allow the end user to search and select a customer from a popup window.
ProcedureStep 1: Select the page in Iron Speed Designer’s Application Explorer where you would like to display the Lookup link, and select the Design tab, e.g.:
Step 3: Switch to the HTML tab and add the following client script code inside the page’s layout. This script can be added right below the line containing the link to the style sheet. Change the URL if appropriate.
If your CustomerID textbox is inside a table, then you need to use an alternate way to retrieve the Client Id since there are multiple rows on the page containing the CustomerId field. To find the unique CustomerId for the row which was clicked, use Container.FindControl("CustomerId").ClientId as follows:
Step 6: Drag and drop a Show Table panel on the page and press the Configure button to display the Panel Wizard. Select the Customer table and the desired set of fields to display on the page. Select the set of fields to be searched by the Search control on the page and any filters to display. Press Finish to configure the table panel. Using the Design tab, change the layout to your satisfaction.
Step 7: Switch to the HTML tab and add a Select link to the row. When the user clicks this link, the CustomerID of this row will be inserted into the CustomerID textbox on the underlying page and the popup window is then closed.
Step 8: Add the following client script code inside the page’s layout. This script can be added right below the line containing the link to the style sheet. Change the URL if appropriate.
Visual Basic .NET:
Once the value for the target variable is set, the current popup window is closed.
Step 9: Bind the CustomerID field value to display the ID of the customer for each row. Launch the Page Properties dialog from the Tools menu, navigate to the CustomerID field in the tree on the left. Go to the Bindings tab and select the CustomerID field. On the Display tab select the Literal Display Style.
Step 10: By default all pages displayed will be added to the session navigation history so that pressing the Cancel button on the page will go back to the previous page. To ensure that the popup window is not added to the session navigation history, override the UpdateSessionNavigationHistory function and do not call the underlying base function that would add this page to the history.
This should be added in the code-behind file for the CustomerLargeListSelector.aspx page. In C# this would be CustomerLargeListSelector.aspx.cs and in Visual Basic .NET it would be CustomerLargeListSelector.aspx.vb.