Main page

Grid with Navigable Detail View

Description

This example shows how to use Grid forms to traverse multiple records and view their details at the same time. In this case, there is no need to switch between a Grid and a Record form to show record details since a grid with a Navigator controls shows all the records with their details.

Usage

Click on an employee name to view detailed information, then click on First, Prev, Next and Last to view other records. Note that you can use the Sorters to rearrange the order in which the records appear. Whenever a sorting order is set, it is maintained even when you navigation to other records.

Steps to recreate

Page 1 (NavGrid):

  1. Use the Grid Builder to create the Employees Grid and Search form based on the employees and departments tables and their three columns: emp_name, title and department_name.
    On Step 2 of the Builder use the Build Query option to select 2 tables: employees and departments.
    On step 3 of the Grid Builder, check the Create Search/Filter checkbox and select field: emp_name.
  2. In the Grid, change the emp_name field type from Label to Link. Then set the Href Source property to the second page (NavGrid_Detail) and enter employeesPage in the Remove Parameters property.
  3. Add code to the Grid's Before Show Row event as shown in the example.
  4. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Page 2 (NavGrid_Detail):

  1. Use the Grid Builder to create the Employees Grid. The name of the Grid should be the same as the name of the Grid in the NavGrid page.
    On Step 5 select the Columnar in the Grid layout listbox.
  2. In the Data Source property of the Grid, add a Where parameter similar to the parameter in the Data Source property of the Grid in the NavGrid page.
  3. Set the Records Per Page property of the Grid to 1.
  4. At the top of the Grid, add Sorters for the Name, Title and Department fields and set their Visible property to No. The Sorters will not be visible but they will enable the Grid to display records based on the sort criteria specified in the NavGrid page. The emp_name link in the NavGrid page transmits any specified sort criteria over the URL when the link is clicked.
  5. Add a Link control below the Grid.
  6. For the Link, set the Href Source property to the NavGrid page and add a Link Parameter with the following properties: Source Type = URL, Parameter Source = empBackPage and Parameter name = employeesPage.
  7. Enter empBackPage in the Remove Parameters property of the Link.
  8. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Intranet

Tables: employees, departments

Programming Notes

Page 1 (NavGrid)

The Grid's Before Show Row event is used to calculate the number of records up to the current page as well as the current page number and the record number. This information is appended to the URL leading to the NavGrid_Detail page.