Use a custom large list selector in place of the default large list selector
on “add and edit” pages to improve searching.

Dean Pepper – Dot Net Architect

September 27^th 2010

Iron Speed Designer v7

Introduction

While adding and editing records, Iron Speed Designer’s default large list selector is useful for searching or filtering on the name of the foreign key, but it does not allow searching on other fields in the foreign key table and can cause confusion when multiple records have the same or similar display names. For example, a client large list selector could have multiple clients called John Smith.

Solution

This article will demonstrate how to create a custom large list selector with the required JavaScript and custom code in the BaseApplicationPage code file to replace the default large list selector used on add and edit pages with a custom large list selector.

This type of large list selector is more flexible and customisable than the standard large list selector as the custom large list selector allows the pop-up window to show multiple fields from the table the field is related to and allows multiple filters to be used above the table, as with the show table pages. The code in BaseApplicationPage allows this large list selector to be used on all add and edit record pages without needing to add custom code to each page to implement the large list selector.

Implementation

Figure 1 – The custom large list selector (left) compared to Iron Speed Designer’s default large list selector (right).

Step 1: Create the large list selector pop-up window

Create a folder to contain your custom large list selectors, for example CustomLargeListSelectors, then add a new page based on the Blank master page to this folder and name it accordingly, for example ClientLargeList.aspx.

Step 2: Add the table control

Drag a Show Table panel from the Toolbox to an empty cell on the page to open the Configuration Wizard. On the Options tab, select No for all table buttons, except refresh and reset, and all table row buttons as this page will not be used for adding or editing records. Configure the Fields, Search box, and Filters as you would like on the next few tabs then click Finish.

Step 3: Add the select link button

Navigate to the Fields section of the table control and insert a column to the left of column A. Drag a Link Button from the GEN tab of the Toolbox to cell A2; this will be used to select the associated record. Next, drag the primary key field from the Fields tab of the Toolbox to cell A2 under the link button; this will contain the ID of the record being selected.

Name the link button SelectLinkButton and set the button text to “Select”. Open the Attributes for the primary key field (ClientID1 in my example) and add an attribute of Visible=False.

Step 4: Add the JavaScript to select the record

Right-click the page and select Page Directives. On the pop-up window, enter the following JavaScript after the StartOfPageContent.

This code will expand the size of the window to accommodate the larger size table then add the selected value to the drop-down list on the add or edit record page.

<script language=javascript>

window.resizeTo(1000,800); // width,height

 function UpdateTargetAddEditPage(selectedValue, selectedDisplayValue) {

 if (window.opener && !window.opener.closed) {

  var target = window.opener.document.getElementById("ctl00_PageContent_ClientID");

   var bSuccess = false;

   if (!bSuccess)

  {

    if (Fev_ReplaceLastListControlOption(target, selectedValue, selectedDisplayValue) )

    {

      bSuccess = Fev_SetFormControlValue(target, selectedValue);

    }

  }

  if (bSuccess)

  {

    if(target != null)

    {

      if (navigator.appName == "Netscape")

      {

        var myevent = document.createEvent("HTMLEvents")

        myevent.initEvent("change", true, true)

        target.dispatchEvent(myevent);

      }

      else

      { // IE

        target.fireEvent('onchange');

      }

    }

  }

  window.close();

  }

}

script>

Step 5: Build the application

Build your Iron Speed application to generate the code-behind file.

Step 6: Open the custom large list selector

Add the following code to the Page_Load() function in Section 1 of the BaseApplicationPage .cs or .vb file. This code will redirect the user to your custom large list selector when the user loads the default large list selector.

C#:

if (string.Compare(Page.Request.AppRelativeCurrentExecutionFilePath, "~/Shared/LargeListSelector.aspx", true) == 0)
  {
    if ((string.Compare(GetUrlParam("Target"), "ctl00_PageContent_ClientID", true) == 0))
    {
      Page.Response.Redirect(string.Format("../CustomLargeListSelectors/ClientLargeList.aspx?target={0}", GetUrlParam("Target")));
    }
  }

Visual Basic .NET:

If String.Compare(Page.Request.AppRelativeCurrentExecutionFilePath, "~/Shared/LargeListSelector.aspx", True) = 0 Then

 If (String.Compare(GetUrlParam("Target"), "ctl00_PageContent_ClientID", True) = 0) Then

  Page.Response.Redirect(String.Format("../CustomLargeListSelectors/ClientLargeList.aspx?target={0}", GetUrlParam("Target")))

  End If

 End If

Step 7: Add the code for the select link button

Enter the following code in the record’s table control row class (ClientTableControlRow in my example). The code runs when the Select button is clicked and passes the ID of the selected record (from ClientID1.Text) and the display name of the selected record (ClientKnownAs) to the JavaScript function from Step 4.

C#:

public override void SelectLinkButton_Click(object sender, EventArgs args)
{
       string ClientKnownAs = ClientTable.GetRecord(ClientID1.Text, false).KnownAs;
       string script = string.Format("UpdateTargetAddEditPage(\"{0}\",\"{1}\");", ClientID1.Text, ClientKnownAs);
       ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", script, true);
}

Visual Basic .NET:

Public Overrides Sub SelectLinkButton_Click(ByVal sender As Object, _

ByVal args As EventArgs)

 Dim ClientKnownAs As String = ClientTable.GetRecord(ClientID1.Text, False).KnownAs

 Dim script As String = String.Format("UpdateTargetAddEditPage(""{0}"",""{1}"");", ClientID1.Text, ClientKnownAs)

 ScriptManager.RegisterStartupScript(Page, Page.GetType, "", Script, True)

End Sub

Conclusion

The article demonstrated how to create a custom large list selector with the required JavaScript and custom code in the BaseApplicationPage code file to replace the default large list selector used on add and edit pages with a custom large list selector to give the user greater flexibility when using large list selectors.

About the Author

Dean Pepper holds a First Class Degree in Computers and Networks and is an experienced developer who currently supports over half a dozen custom business applications using Iron Speed Designer, Visual Studio, SQL Server and Red Gate SQL Compare. He started programming while at secondary school and is proficient in ASP.Net, C#, VB.Net and JavaScript. In his spare time, Dean enjoys mountaineering and ten-pin bowling.