Previous Next JavaScript must be enabled to correctly display this content

## 8.8.5 Creating Master Detail from an Existing Interactive Grid

Create a single page master detail which includes two editable interactive grids based on two related tables or views.

You can define any number of master detail relationships on a single page by simply adding a related interactive grid to the page. If you have an existing interactive grid, you can add another related interactive grid by doing the following:

- Create the parent interactive grid.

- Define the primary key (if needed).

- Create the child interactive grid.

- For the child interactive grid, specify the Master Region and Master Column.

The following example demonstrates how to create an interactive grid on the departments table, `OEHR_DEPARTMENTS` by running the Create Page Wizard. This wizard creates the parent interactive grid and enables you to define the primary key. Then, you create a child interactive grid on the employees table, `OEHR_EMPLOYEES`. The `OEHR_DEPARTMENTS` and `OEHR_EMPLOYEES` tables are available in the sample data set, HR Data.

To add a related interactive grid below an existing grid:

1. Create an application.
2. Create the first interactive grid on the `OEHR_DEPARTMENTS` table:
   1. On the Application home page, click Create Page
   2. Under Component, select Interactive Grid.
   3. Name - Specify a text name for this page (for example, `Departments`).

      Tip:

      This text is also used for report region Title. After page creation, you can modify the Title in Page Designer.
   4. Page Mode - Select Normal.
   5. Include Form Page - Disable this flag.
   6. Data Source - Select Local Database.
   7. Source Type - Select Table.
   8. Table /View Name - Select OEHR_DEPARTMENTS (table).
   9. Editing Enabled - Enable this flag to make this interactive grid editable.
   10. Navigation - Expand the region and enable or disable navigation. If either flag is enabled, additional attributes appear. To learn more about an attribute, see field-level Help.
   11. Click Next.
3. Primary Key Column 1 - Accept the default.
4. Click Create Page.
5. Click Save and Run Page to view a rendered version of the parent interactive grid.

   This following image shows an editable interactive grid created on the `OEHR_DEPARTMENTS` table.

   Description of the illustration master_detail_parent.png
6. Return to Page Designer. Click Page X on the Developer toolbar, where X is the page number.
7. Create the child interactive grid on the `OEHR_EMPLOYEES` table:
   1. In the Gallery, locate the Regions tab.
   2. Under Regions, find and then right-click Interactive Grid.
   3. Select Add To, Body, the region, Departments, and then After.

   The Rendering tab and Layout tab both display the new region.

   Description of the illustration master_detail_new_child_region.png
8. Edit the New child region:
   1. In the Rendering tab, select the New region (if not already selected).
   2. In the Property Editor, edit the region attributes:

      Note:

      To find a group or attribute, enter keywords in the Filter field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

      - Identification, Name - Enter `Employees`.

      - Source, Type - Select SQL Query.

      - Source, SQL Query - Enter the query:

            select OEHR_EMPLOYEES.EMPLOYEE_ID as EMPLOYEE_ID,
                OEHR_EMPLOYEES.FIRST_NAME as FIRST_NAME,
                OEHR_EMPLOYEES.LAST_NAME as LAST_NAME,
                OEHR_EMPLOYEES.HIRE_DATE as HIRE_DATE,
                OEHR_EMPLOYEES.EMAIL as EMAIL,
                OEHR_EMPLOYEES.PHONE_NUMBER as PHONE_NUMBER,
                OEHR_EMPLOYEES.JOB_ID as JOB_ID,
                OEHR_EMPLOYEES.SALARY as SALARY,
                OEHR_EMPLOYEES.DEPARTMENT_ID as DEPARTMENT_ID
             from OEHR_EMPLOYEES

      - Layout, Start New Row - Select On.

      - Appearance, Template - Select Standard

      - Master Detail, Master Region - Select the region, Departments.

9. For the child interactive grid, Employees, define `DEPARTMENTS` as the Master Column:
   1. In the Rendering tab, under the child interactive grid, Employees, expand the Columns node and select DEPARTMENT_ID.
   2. In Property Editor, edit the following:

      - Find Master Detail.

      - For Master Column, select DEPARTMENT_ID.

10. Click Save. To run the page, click Save and Run Page.
    Description of the illustration master_detail_run.png

    Note that parent the parent report, Department, filters the results in Employees, the child report.

    Next, make the child report, Employees, editable.

11. Make Employees report editable:
    1. Access Page Designer. Click Page X on the Developer toolbar, where X is the page number.
    2. In the Rendering tab, select the Employees region.
    3. In the Property Editor, click the Attributes tab.
    4. In the Property Editor, edit the following:

       - Edit, Enabled - Select On.

       - Allowed Operations - Verify the following operations are enabled: Add Row, Update Row, and Delete Row.

12. Define the `EMPLOYEE_ID` column as the Primary Key Column:
    1. In the Rendering tab, under Employees, expand Columns and select EMPLOYEE_ID.
    2. In the Property Editor, find Source, and turn Primary Key to On.
13. Click Save. To run the page, click Save and Run Page.

    The child interactive grid, Employees, is now editable

    Description of the illustration master_detail_editable.png

Parent topic: Managing Interactive Grids