---
title: "Drilldown Grids | Features"
description: "ZingGrid has a robust API that allows you to drill down into grid data by clicking on or hovering over a row."
url: https://www.zinggrid.com/docs/features/drilldown-grids
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/drilldown-grids.md
mode: provenance
representation: markdown
origin_response_id: 73b9165f17b9906fefcf87cb824ebdef
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.684Z
version_nonce: 823756db4586ca59ed1158d3b1725a87
generated_at_utc: 2026-11-08T09:56:38.980Z
response_nonce: eaacd6713b3d04003406ff7256fae2f2
```

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

> **Note:** 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](https://www.zinggrid.com/docs/api/events/reference).

## Row Click

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

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

### Row Click Drilldown Grid
Here is a complete grid with drilldown by row click enabled:

[Example code](https://app.zingsoft.com/demos/embed/N0NI9HV8)

## 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.

```javascript
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:

[Example code](https://app.zingsoft.com/demos/embed/LGVGDAVM)

## Record Click

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

```javascript
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:

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

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

* [API Events List](https://www.zinggrid.com/docs/api-events)