Interactive Grid Master-Detail: Building Linked Grids That Stay in Sync

One Click, Two Grids

A master-detail Interactive Grid setup lets users click a row in the master grid and instantly see the related detail rows in a second grid below. This is the APEX equivalent of a master-detail Form but with the power of inline editing across both levels. Order headers with order lines, departments with employees, or invoices with line items are all natural fits.

Setting Up the Master Grid

Create the master IG region with a simple query. The critical setting is the Static ID, which you will reference from the detail grid. Under the region’s Attributes, ensure “Selection” is set to a mode that allows row selection (Single Row or Multiple):

-- Master region: Static ID = "masterOrders"
SELECT order_id, customer_name, order_date, status, total_amount
  FROM orders
 WHERE order_date >= ADD_MONTHS(SYSDATE, -6)
 ORDER BY order_date DESC;

Setting Up the Detail Grid

Create the detail IG region below the master. In the detail region’s source query, reference the master grid’s selected row using a page item that is set by a Dynamic Action:

-- Detail region: Static ID = "detailLines"
SELECT line_id, product_name, quantity, unit_price,
       quantity * unit_price AS line_total
  FROM order_lines
 WHERE order_id = :P10_SELECTED_ORDER_ID
 ORDER BY line_id;

The Dynamic Action Glue

Create a Dynamic Action on the master IG’s Selection Change event. In the True action, use Set Value to populate P10_SELECTED_ORDER_ID from the selected row, then Refresh the detail region:

-- Dynamic Action: On Selection Change [masterOrders]
-- True Action 1: Set Value (JavaScript Expression)
//   Item: P10_SELECTED_ORDER_ID
//   Expression:
apex.region("masterOrders").widget().interactiveGrid("getViews","grid")
    .model.getValue(
        apex.region("masterOrders").widget().interactiveGrid("getViews","grid")
            .getSelectedRecords()[0],
        "ORDER_ID"
    )

-- True Action 2: Refresh Region [detailLines]

Editable Master-Detail

Both grids can be editable simultaneously. When saving, APEX processes the master grid’s changes first, then the detail grid’s changes. For new master rows, you need a mechanism to assign the generated primary key to the detail rows. Use a page process that fires after the master DML to set the foreign key value on any new detail rows before the detail DML runs.

Save Both Grids Together

Place a single Save button outside both grids. In its Dynamic Action, execute JavaScript that saves the master grid first, waits for completion, then saves the detail grid:

// Save master first, then detail
apex.region("masterOrders").widget().interactiveGrid("getActions").invoke("save");
// After master save completes, refresh detail to pick up new IDs
// Then save detail changes