Using a Large List Selector

Solution Approach

This example shows how to use the “Product Selector” page created in the Creating a Large List Selector example.  The EditOrder page was created by modifying the layout of the MasterDetailPage page in the Tutorial sample application.

Procedure

Step 1:  Locate and open the layout page file of the page you wish to modify, e.g.:

…\Apps\Tutorial\Tutorial Pages\EditOrder.html

Step 2:  Add the following client script code inside the page’s layout:

<script language=javascript>

<!--

     function openProductSelector(target)

     {

          var url = './ProductSelector.aspx?target=' + target;

          window.open(url, '', 'width=725, height=485');

     }

//-->

</script>

Step 3:  Add the following HTML/DHTML inside the page’s layout:

<GEN:FieldValue Name="ProductId" />

<a

     href="javascript:"

     onclick="openProductSelector('<%# Me.ProductId.ClientId %>'); return false;"

>Find Product</a>

Note that the single value data binding expression references the GEN:FieldValue tag’s run-time server control.

Step 3 (alternate method):  Add the following HTML/DHTML inside the page’s layout:

<GEN:FieldValue Name="ProductId" />

<a

     href="javascript:"

     onclick="openProductSelector('<%# Container.FindControl("ProductId").ClientId %>'); return false;"

>Find Product</a>

Note that the single value data binding expression references the GEN:FieldValue tag’s run time server control.  Unlike the previous step 3 code, this version is suitable for use inside of a GEN:ItemTemplate tag.

Step 4:  Set the display style property to Literal.

Step 5:  Build and run the application.