Iron Speed Designer Help
 

Creating a Custom Large List Selector

Updated August 18, 2012
Iron Speed Designer V9.2 and later

In 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 100 (an adjustable default), Iron Speed Designer automatically displays a Large List Selector next to the dropdown list control.  The large list selector threshold can be changed by modifying the “Maximum generated items” 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 Table Report 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 can be added to the AcmeOMS sample application included with Iron Speed Designer.

To create a custom large list selector, modify the page to display a Lookup link.  This link will open the large list selector and pass the associated text box field as a “target” to receive the selected value.  The large list selector page is a standard Table Report page modified to display a Select link.  When the user clicks on the Select link, a small Javascript function sets the selected value in the target text box.  The following step-by-step instructions walk through each modification.

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.

 

Browser Support

This customization works for Microsoft Internet Explorer and Google Chrome; it does not work in Mozilla Firefox because Firefox does not recognize the “window.opener.document.all” a function used in the script.

Procedure

Step 1:  Select the page in Iron Speed Designer’s Application Explorer where you would like to display the Lookup link, e.g.:

...\Sample Applications\AcmeOMS\Orders\AddOrders.aspx

Step 2:  In the Layout Editor, select the CustomerID control and change the Control Type property to “Textbox” via the Property Sheet.

 

Step 3:  Drag a GEN:LinkButton from the Toolbox to the cell containing the CustomerID text box.  Use the Property Sheet to configure the LinkButton, e.g.:

 

Step 4:  Build your application.  This is important because you need code updated for both the LinkButton and CustomerID controls before proceeding to the next step.

Step 5:  Zoom out to the page level using the page section list, e.g.: AddOrders.aspx.  Then select the cell containing the record control which contains the newly added link button.  Finally, in the Load code tab, add this code to the beginning:

C#:

if(this.DataSource != null) this.LinkButton.Attributes["onClick"]= "OpenCustomerSelector('" + this.CustomerID.ClientID + "');return false;";

Visual Basic .NET:

If Not Me.DataSource Is Nothing Then

     Me.LinkButton.Attributes.Add("onClick", "OpenCustomerSelector('" & Me.CustomerID.ClientID & "');return false;")

End If

Note that C# pages refer to the page class as “this” and Visual Basic .NET refers to them as “Me”.  Also note that C# is case sensitive, so ClientID must be specified with ID in upper case.

 

If your CustomerID text box is inside a table, then you need to add the above code to Row’s Load event, in this example to CustomersTableControlRow. To do that you need to override:

Control_Load(object sender, EventArgs e) (C#)
Control_Load(ByVal sender As Object, ByVal e As System.EventArgs) (VB.NET)

In Section 1 (in CustomersTableControlRow class) : copy all content of the existing method (in BaseCustomersTableControlRow) and add the code above.

Step 6:  Create a new Table Report page that will be displayed when the application user clicks the Lookup hyperlink. The easiest way to create this page is to right click on the Orders folder, select New, Page, Blank master page since no header, footer or menu is required on the pop-up window.  Name this new page “CustomerLargeListSelector.aspx” to match URL target in step 12.

Step 7:  In the new Table Report page, drag a Customers Table Report panel from the Toolbox (Reports & Forms, Report for…, Unrelated tables) into the first cell of the page.

Step 8:  Insert a new column to the left of the first column of the panel.  Drag a LinkButton control from the Toolbox into the repeater cell.  Configure the newly added control via the Property Sheet:

Step 9:  Build the application to update its code.

Step 10:  Add javascript to the onclick attribute of the newly added button by overriding the DataBind event for the row (i.e. for CustomersTableControlRow) in Section 1 of the Controls.cs (.vb) file:

C#:

public class CustomersTableControlRow : BaseCustomersTableControlRow

{

     // The BaseCustomersTableControlRow implements code for a ROW within the

     // the CustomersTableControl table.  The BaseCustomersTableControlRow implements the DataBind and SaveData methods.

     // The loading of data is actually performed by the LoadData method in the base class of CustomersTableControl.

     // This is the ideal place to add your code customizations. For example, you can override the DataBind,

     // SaveData, GetUIData, and Validate methods.

     //add the following code

     public override void DataBind()

     {

          base.DataBind();

          if(this.DataSource != null) this.LinkButton.Attributes.Add("onClick", "UpdateTarget('" + this.DataSource.CustomerID.ToString() + "');return false;");

     }

}

Visual Basic .NET:

Public Class CustomersTableControlRow

Inherits BaseCustomersTableControlRow

     ' The BaseCustomersTableControlRow implements code for a ROW within the

     ' the CustomersTableControl table.  The BaseCustomersTableControlRow implements the DataBind and SaveData methods.

     ' The loading of data is actually performed by the LoadData method in the base class of CustomersTableControl.

     ' This is the ideal place to add your code customizations. For example, you can override the DataBind,

     ' SaveData, GetUIData, and Validate methods.

    ‘ add the following code

     Public Overrides Sub DataBind()

          MyBase.DataBind()

          If Not Me.DataSource Is Nothing Then

              Me.LinkButton.Attributes.Add("onClick", "UpdateTarget('" & Me.DataSource.CustomerID.ToString() & "');return false;")

          End If

     End Sub

End Class

Step 11:  Add the following Javascript client script code to the master page for AddOrders.aspx (HorizontalMenu.master in this example) via the Page Directives dialog (Right-click, Page Directives…). 

<script type="text/javascript"  language="javascript">

function OpenCustomerSelector(target)

{

     var url = '../Orders/CustomerLargeListSelector.aspx?target=' + target; window.open(url, '', 'width=550, height=400, resizable=yes, scrollbars=yes, modal=yes');

}

</script>

The Javascript defines a function called OpenCustomerSelector that takes a parameter called “target”.  The function opens a browser window for a URL passing the “target” URL parameter.  The “target” URL parameter is the ClientID of the text box that will receive the selected value.  In the AcmeOMS example, this would be the CustomerID text box displayed on the Add Orders page that will receive the selected value.

Step 12:  Now add similar Javascript for the UpdateTarget function to the Page Directives of Blank master page (Blank.master).

C#

<script type="text/javascript" language="javascript">

function UpdateTarget(selectedValue)

{

     var target = window.opener.document.all('<%# Request.Params["target"] %>');

     target.value = selectedValue; window.close();

}

</script>

Visual Basic .NET

<script type="text/javascript" language="javascript">

function UpdateTarget(selectedValue)

{

     var target = window.opener.document.all('<%# Request.Params("target") %>');

     target.value = selectedValue; window.close();

}

</script>

The above Javascript defines a function called UpdateTarget that takes a parameter called “selectedValue”.  The function retrieves the “target” URL parameter from the URL and sets the .value to the selectedValue parameter passed to the function.  Once the value for the target variable is set, the current pop-up window is closed.

Step 13:  Use the Property Sheet to bind the CustomerID control to display the ID of the customer for each row.

Step 14:  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 the pop-up window is not added to the session navigation history, override the UpdateSessionNavigationHistory function to not call the underlying base function that adds this page to the history.

Add the override in the code-behind file for the CustomerLargeListSelector.aspx page, e.g.: CustomerLargeListSelector.aspx.cs (.vb).

C#:

protected override void UpdateSessionNavigationHistory()

{

     // do nothing

}

Visual Basic .NET:

Protected Overrides Sub UpdateSessionNavigationHistory()

     'Do nothing

End Sub

Step 15:  Build and run your application.  The Customer Large List Selector page is now ready to use.