Nesting of grids with lazy loading

The data in nested grids can be loaded lazily from remote location upon expansion of corresponding row.

This example also shows how the reference to parent grid and row data of parent grid can be passed to detail view / nested child grid from detailModel.init callback.

rowData.pq_detail contains important properties of the detailModel.

• pq_detail.show is true/false depending upon expanded/collapsed state of the detail.
• pq_detail.child contains DOM node reference to the detail.

Display Detail Row Across Frozen and Scrolling Panes

By default, the detail row is rendered inside the scrolling pane, which may cause it to shift to the right if frozen columns are used. If you want the detail row to span both the frozen and scrolling panes, follow the steps below:

1. Move the detail row into the frozen pane

Override the getPadding method to shift the detail row toward the frozen pane:

// Shift detail row towards the frozen pane
$.paramquery.cHierarchy.prototype.getPadding = _ => ({ paddingLeft: 5 });

2. Adjust stacking with CSS

Apply the following CSS to ensure the detail row appears above both panes:

.pq-detail {
    z-index: 90;
}

.pq-cont-right {
    z-index: unset;
}

Result

• The detail row overlaps both frozen and scrolling panes
• It is no longer visually pushed to the right
• Proper stacking ensures it remains visible above grid sections in the frozen pane