experiment_id: web-retrieval-v1
fixture_id: /docs/features/drilldown-grids
mode: provenance
representation: html
origin_response_id: 17f04ee155a911fd08b73c392a9181bc
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.609Z
version_nonce: 4ce9b9522bd09c285d76879eb842b138
generated_at_utc: 2026-11-07T21:34:22.337Z
response_nonce: 0685cb3eab086f66d51bca5e63dbf45a
Docs Version 1

Drilldown

With ZingGrid's robust API, you can drill down into grid data with a row:click or row:mouseover event.

ZingGrid has an extensive list of API events for you to add dynamic interactions to your grid. Check out the entire list of API events here.

Row Click

Add an event listener for the row:click event (see below) to enable drill down into rows by clicking on them.

mainGrid.addEventListener('row:click', function(e) {...})

Row Click Drilldown Grid

Here is a complete grid with drilldown by row click enabled:

Top

Row Hover

Add event listeners for the row:mouseover and row:mouseout events (see below) to enable drill down into rows by hovering over them.

mainGrid.addEventListener('row:mouseout', function(e) {...});
mainGrid.addEventListener('row:mouseover', function(e) {...})

Row Hover Drilldown Grid

Here is a complete grid with drilldown by row hover enabled:

Top

Record Click

Add an event listener for the record:click event (see below) to enable drill down into records by clicking them.

topLevelGrid.addEventListener('record:click', function(e) {
  if (e.detail.ZGData.cell && e.detail.ZGData.cell.type === 'url') return; // Cancel drilldown for URL clicks
  // Otherwise do all the drilldown stuff
}

You may also add something like this to included blocking custom markup from anchor tags:

if (e.detail.ZGEvent.oDOMTarget.tagName !== 'ZG-CHECKBOX' && e.detail.ZGEvent.oDOMTarget.tagName !== 'A')
Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: drilldown grids]