Docs

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: