API Events
ZingGrid comes with its own set of events that work similarly to modern event handlers. Many of these events help signal when the grid or its components are rendered, or when an interaction occurs. Events return a ZGData object that contains details about the element the event triggered from.
On This Page
Event Usage
ZingGrid events have to be added after ZingGrid is ready, which is determined through the
executeOnLoad()
method.
In the example below, we attach the ZGCell's click event, cell:click
.
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
zgRef.addEventListener('cell:click', function() { alert('Click!'); });
});
Note that ZingGrid events are not compatible with on-tag event attributes or direct bound events. Therefore, the following examples will not work!
Adding an event handler as an attribute:
<zing-grid onclick="click"></zing-grid>
<script>
function click() { alert('Click!'); }
</script>
document.querySelector('zing-grid').onrender = function click() { alert('Rendered'); };
<zing-grid>
zing-grid refers to the grid, and its events target the grid as a whole (zing-grid Events Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('grid:ready', function(e) {
console.log('--- (grid:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
<zg-card>
zg-card events are events that target the grid as a whole (zg-card Events Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('card:ready', function(e) {
console.log('--- (card:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
<zg-cell>
zg-cell events are events that are triggered by each individual cell of the grid (zg-cell Events Playground).
Example Usage
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('cell:ready', function(e) {
console.log('--- (cell:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
When implementing your own custom renderer function and binding an event, only attempt to bind events to contents of zg-cell! Do not bind events to zg-cell or zg-row — these components are reused to enhance performance. To bind events to zg-cell or zg-row, please use ZingGrid's custom events.
<zg-column>
zg-column refers to the columns of the grid. Events triggered by columns are zg-column events (zg-column Events Playground).
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('column:ready', function(e) {
console.log('--- (column:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
<zg-data>
zg-data events relate to data and any changes made to a record (zg-data Events Playground).
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('data:ready', function(e) {
console.log('--- (data:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
<zg-header>
zg-header events are triggered by the header cell of a column (zg-header Events Playground).
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('header:ready', function(e) {
console.log('--- (header:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
<zg-row>
zg-row refers to a row in the grid. Events triggered by rows are zg-row events (zg-row Events Playground).
const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('row:ready', function(e) {
console.log('--- (row:ready) event fired ---', e);
});
Name | Description | Returns | Demo |
---|
When implementing your own custom renderer function and binding an event, only attempt to bind events to contents of zg-cell! Do not bind events to zg-cell or zg-row — these components are reused to enhance performance. To bind events to zg-cell or zg-row, please use ZingGrid's custom events.