Filtering a Grid with a Grid Selection

Description

How to to call a filtered grid from another grid.

A common application requirement is to call a filtered grid from another grid. In this case the grid on the calling page is based on the parent table in a set. The grid on the called page is based on the child table in the same set. This topic describes how to add a filter to the URL that displays the target page. The result is similar to what you can achieve with a gridlinker component that contains the same two grids.

Creating the Child Grid Component and Selecting Fields from an Alpha Anywhere Table

  1. Create a new updateable (editable) grid based on the AlphaSports sample database.

  2. Display the Grid > Query (DBF) page.

  3. Select the View radio button.

  4. Click Tables in View to display the Define Join dialog.

  5. Click Add Table, select "Invoice_Header", and click OK.

  6. Select "Invoice_Header", click Add Table, select "Invoice_Items", and click OK.

  7. Select "Invoice_Items", click Add Table, select "Product", and click OK to return to the Grid Builder.

  8. Click Fields in View to display the Select Fields in View dialog.

  9. Select "Invoice_Header" from the drop down list, select "Invoice_Number", and click the '>' icon.

  10. Select "Invoice_Items" from the drop down list, select "Price", "Quantity", and "Extension", and click the '>' icon.

  11. Select "Product" from the drop down list, select "Description", and click the '>' icon.

  12. Click OK to return to the Grid Builder.

Creating the Child Grid Component and Selecting Fields from the AlphaSports.mdb Database

  1. Create a new updateable (editable) grid based on tables from the AlphaSports sample database.

  2. Display the Grid > Query (DAO) page.

  3. Select your connection string from the Connection Name list.

  4. Click Connect.

  5. Select the SQL Select Statement radio button.

  6. Click Edit SQL to display the SQL Builder dialog.

  7. Click Tables in Query, select "Invoice_Header (Table)", and click OK.

  8. Select "Invoice_Header", click Add Table, select "Invoice_Items (Table)", and click OK.

  9. Select "Invoice_Items", click Add Table, select "Product (Table)", and click OK to return to the Grid Builder.

  10. Click Fields in Query to display the Select Fields in View dialog.

  11. Select "Invoice_Header" from the drop down list, select "Invoice_Number", and click the '>' icon.

  12. Select "Invoice_Items" from the drop down list, select "Price", "Quantity", and "Extension", and click the '>' icon.

  13. Select "Product" from the drop down list, select "Description", and click the '>' icon.

  14. Click OK to return to the Grid Builder.

Placing the Fields and Formatting the Grid

  1. Display the Grid > Fields page.

  2. Place the 5 fields on the grid and format them.

  3. Display the Grid > Properties page.

  4. Set the Layout Options > Style name to "Sunshine".

  5. Set the Layout Options > Rows of data to "6".

  6. Save the component with the name "child".

  7. Create a new A5W page and save it with the name "child".

  8. Place the "child" grid component on the page.

  9. Display the Source tab of the HTML Editor.

  10. Change the HTML code at the beginning of the body from:

    • <bodyclass="SunshinePageBODY">
      <p><br>
      <table>
    • <bodyclass="SunshinePageBODY">
      <p><strong>Order by <%a5
      ? custname
      %> </strong><br>
      <table>
  11. Save the page.

Creating the Parent Grid Component and Page (Alpha Anywhere)

  1. Create a new updateable (editable) grid based on the AlphaSports sample database.

  2. Display the Grid > Query (DBF) page.

  3. Select the View radio button.

  4. Click Tables in View to display the Define Join dialog.

  5. Click Add Table, select "Invoice_Header", and click OK.

  6. Select "Invoice_Header", click Add Table, select "Customer", and click OK.

  7. Click OK to return to the Grid Builder.

  8. Click Fields in View to display the Select Fields in View dialog.

  9. Select "Invoice_Header" from the drop down list, select "Invoice_Number", and click the '>' icon.

  10. Select "Invoice_Items" from the drop down list, select the fields you want on the grid, and click the '>' icon.

  11. Select "Customer" from the drop down list, select "Firstname" and "Lastname", and click the '>' icon.

  12. Click OK to return to the Grid Builder.

Creating the Parent Grid Component and Page (SQL)

  1. Create a new updateable (editable) grid based on tables from the AlphaSports sample database.

  2. Display the Grid > Query (DAO) page.

  3. Select your connection string from the Connection Name list.

  4. Click Connect.

  5. Select the SQL Select Statement radio button.

  6. Click Edit SQL to display the SQL Builder dialog.

  7. Click Tables in Query, select "Invoice_Header (Table)", and click OK.

  8. Select "Invoice_Header", click Add Table, select "Customer (Table)", and click OK.

  9. Click OK to return to the Grid Builder.

  10. Click Fields in Query to display the Select Fields in View dialog.

  11. Select "Invoice_Header" from the drop down list, select "Invoice_Number", and click the '>' icon.

  12. Select "Invoice_Items" from the drop down list, select the fields you want on the grid, and click the '>' icon.

  13. Select "Customer" from the drop down list, select "Firstname" and "Lastname", and click the '>' icon.

  14. Click OK to return to the Grid Builder.

Placing the Fields and Formatting the Grid

  1. Display the Grid > Fields page.

  2. Place the selected fields on the grid and format them.

  3. In the Selected list choose "Invoice_Number".

    • Change the control's Display Settings > Control type to "Link".

    • Change the Link Properties > Link address type to "Computed from fields in the grid".

    • Clickin the Link Properties > Link address field to display the Link Address Builder.

    • Enter the following code into the Link Address text box:

      child.a5w?child_link_1C=Invoice_Number={Invoice_Number}&custname={Firstname} {Lastname}.

Understanding the URL

This URL is the key to making the link between the two pages and grids. The following shows Components of the URL

  • child.a5w

    This is the name of the page you are opening.

  • ?child

    Indicates that the URL is addressing the child with the alias child.

  • _link

    Indicates that the child grid should display the child records of the current record in the parent grid.

  • _1C=

    This is the first filter element and it has a character value.

  • Invoice_Number={Invoice_Number}

    This is the filter expression. The Invoice_Number field on the child grid (left side of equation) must match the Invoice_Number being passed from the parent grid (right side of equation).

  • &custname={Firstname} {Lastname}

    This is an extra argument that has nothing to do with the filter. It creates a new variable named custname and says that the value of the variable is equal to the Firstname and Lastname fields of the current record in the parent grid, separated by a space character.

  1. Display the Grid > Properties page.

  2. Set the Layout Options > Style name to "Sunshine".

  3. Set the Layout Options > Rows of data to "6".

  4. Save the component with the name "parent".

  5. Create a new A5W page and save it with the name "parent".

  6. Place the "parent" grid component on the page.

  7. Save the page.

  8. Publish the two pages and display parent.a5w. You should see something like this.

Clicking on the Invoice link of the "Evan Feld" record displays the child table with the items for this invoice. Note how the name of the customer is displayed above the grid.

images/WPT_Filtered_child_grid.gif

See Also