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.

Test out any of the methods below in our Events Sandbox.

executeOnLoad()

If you need to wait until everything in the grid is ready, typically when running actions and set methods on the grid, you will use zgRef.executeOnLoad() to determine when to perform actions on the grid.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(() => {
  // apply ZingGrid methods in here like data:
  zgRef.setData();
});

Grid Events

zing-grid refers to the <zing-grid> element, and its associated events target the entire grid as a whole.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('grid:ready', function(e) {
  console.log('--- (grid:ready) event fired ---', e);
});

grid:beforerender

Version 1.x Version 2.x

Description

Fires the event once before the grid renders.

Important Return Values

Null

Demo

grid:contextmenuclose

Version 1.x Version 2.x

Description

Fires the event when the contextmenu is closed.

Important Return Values

Null

Demo

grid:contextmenuopen

Version 1.x Version 2.x

Description

Fires the event when the contextmenu is opened.

Important Return Values

Null

Demo

grid:deselect

Version 1.x Version 2.x

Description

Fires the event when selection is deselected in the grid.

Important Return Values

Null

Demo

grid:hydrate

Version 1.x Version 2.x

Description

Fires the event when the pre-rendered grid is finished being hydrated.

Important Return Values

Null

Demo

grid:keydown:esc

Version 1.x Version 2.x

Description

Fires the event when the (Esc) key is pressed.

Important Return Values

Null

Demo

grid:pagechange

Version 1.x Version 2.x

Description

Fires the event when a page changes in the grid.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:pagefirst

Version 1.x Version 2.x

Description

Fires the event when the grid changes to the first page.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:pagelast

Version 1.x Version 2.x

Description

Fires the event when the grid changes to the last page.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:pagenext

Version 1.x Version 2.x

Description

Fires the event when the grid changes to the next page.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:pageprev

Version 1.x Version 2.x

Description

Fires the event when the grid changes to the previous page.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:pagesizechange

Version 1.x Version 2.x

Description

Fires the event when the page-size (amount of rows displaying) changes on the grid.

Important Return Values

Type: Number
Name: ZGData.currentPage
Description: The current page index.
Type: Number
Name: ZGData.oldPageSize
Description: The old `page-size` of the grid.
Type: Number
Name: ZGData.pageSize
Description: The current `page-size` of the grid.

Demo

grid:ready

Version 1.x Version 2.x

Description

Fires the grid ready event when grid is ready.

Important Return Values

Null

Demo

grid:refresh

Version 1.x Version 2.x

Description

Fires the event when the grid is refreshed through grid controls or API method refresh().

Important Return Values

Null

Demo

grid:render

Version 1.x Version 2.x

Description

Fires the event once when grid renders.

Important Return Values

Null

Demo

grid:scroll

Version 1.x Version 2.x

Description

Fires the event when scrolling occurs in grid.

Important Return Values

Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

grid:search

Version 1.x Version 2.x

Description

Fires the event when a the grid is searched.

Important Return Values

Type: String
Name: ZGData.searchTerm
Description: The current search term.
Type: Array
Name: ZGData.searchResults
Description: The Array of search results
Type: Number
Name: ZGData.searchCount
Description: The length of the search results

Demo

grid:select

Version 1.x Version 2.x

Description

Fires the event when selection is made in the grid.

Important Return Values

Type: Number
Name: ZGData.columnEnd
Description: The column where the selection ends.
Type: Number
Name: ZGData.columnStart
Description: The column where the selection starts.
Type: String | Array
Name: ZGData.selectedData
Description: A string for a single cell and array for multiple cells being selected.
Type: String
Name: ZGData.rowEnd
Description: The row where the selection ends.
Type: String
Name: ZGData.rowStart
Description: The row where the selection starts.
Type: Object
Name: ZGData.DOMCell
Description: The single selected cell. If multiple cells are selected, this will have the first one. Use cells to access the rest.
Type: Array
Name: ZGData.DOMCells
Description: An array of the selected cells. If only one cell is selected, it is still in an array.

Demo

grid:selectall

Version 1.x Version 2.x

Description

Fires the event when selecting every cell (ctrl+a) in the grid.

Important Return Values

Null

Demo

grid:sort

Version 1.x Version 2.x

Description

Fires the event when a the grid is sorted

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The index of the sorted column
Type: Array
Name: ZGData.order
Description: Which direction the index is sorted

Demo

Card Events

<zg-card> events are events that target the grid as a whole.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('card:click', function(e) {
  console.log('--- (card:click) event fired ---', e);
});

card:click

Version 1.x Version 2.x

Description

Fires the card:click and record:click event when a click occurs on a record (card).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

card:mouseout

Version 1.x Version 2.x

Description

Fires the event when mouse is moved out a record (card).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

card:mouseover

Version 1.x Version 2.x

Description

Fires the event when mouse is moved over a record (card).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

Cell Events

<zg-cell> events are events that are triggered by each individual cell of the grid.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('cell:click', function(e) {
  console.log('--- (cell:click) event fired ---', e);
});

cell:beforecopy

Version 1.x Version 2.x

Description

Fires the event when copying (ctrl+c) occurs in a cell before the data is saved to the clipboard. The event handler can modify the data in ZGData.copiedValue to store in the clipboard

Important Return Values

Type: Object
Name: ZGData.data
Description: The data from the copied cell(s)
Type: String
Name: ZGData.copiedValue
Description: The string that will be copied. Can be changed

Demo

cell:beforerender

Version 1.x Version 2.x

Description

Fires the event before a cell is rendered.

Important Return Values

Type: Number
Name: ZGData.columnIndex
Description: The numerical index of the column.
Type: Object
Name: ZGData.data
Description: The full data object for the cell.
Type: Object
Name: ZGData.DOMCell
Description: The DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.rowIndex
Description: The numerical index of the row.

Demo

cell:click

Version 1.x Version 2.x

Description

Fires the event when a click occurs to a cell.

Important Return Values

Type: Object
Name: ZGData.DOMCell
Description: The relevant DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The column position index.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: String
Name: ZGData.recordIndex
Description: The current record index.
Type: String
Name: ZGData.type
Description: The column type (default is text).
Type: String
Name: ZGData.value
Description: The value of the cell.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

cell:closeedit

Version 1.x Version 2.x

Description

Fires the event when the cell editor is closed.

Important Return Values

Type: Boolean
Name: ZGData.canceled
Description: If the user canceled instead of saving the cell edit.
Type: Number
Name: ZGData.columnIndex
Description: The numerical index of the column.
Type: Object
Name: ZGData.data
Description: The full data object for the cell.
Type: Object
Name: ZGData.DOMCell
Description: The DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: ZGData.newValue
Description: The new value of the cell after editing.
Type: Number
Name: ZGData.rowIndex
Description: The numerical index of the row.

Demo

cell:copy

Version 1.x Version 2.x

Description

Fires the event when copying (ctrl+c) occurs in a cell.

Important Return Values

Type: Object
Name: ZGData.data
Description: The data from the copied cell(s)
Type: String
Name: ZGData.copiedValue
Description: The string that was copied.

Demo

cell:mouseout

Version 1.x Version 2.x

Description

Fires the event when mouse is moved out of a cell.

Important Return Values

Type: Object
Name: ZGData.cell
Description: The relevant DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The column position index.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: String
Name: ZGData.recordIndex
Description: The current record index.
Type: String
Name: ZGData.type
Description: The column type (default is text).
Type: String
Name: ZGData.value
Description: The value of the cell.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

cell:mouseover

Version 1.x Version 2.x

Description

Fires the event when mouse is moved over a cell.

Important Return Values

Type: Object
Name: ZGData.cell
Description: The relevant DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The column position index.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: String
Name: ZGData.recordIndex
Description: The current record index.
Type: String
Name: ZGData.type
Description: The column type (default is text).
Type: String
Name: ZGData.value
Description: The value of the cell.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

cell:openedit

Version 1.x Version 2.x

Description

Fires the event when the cell editor is opened.

Important Return Values

Type: Number
Name: ZGData.columnIndex
Description: The numerical index of the column.
Type: Object
Name: ZGData.data
Description: The full data object for the cell.
Type: Object
Name: ZGData.DOMCell
Description: The DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.rowIndex
Description: The numerical index of the row.

Demo

cell:paste

Version 1.x Version 2.x

Description

Fires the event when pasting (ctrl+p) occurs in a cell.

Important Return Values

Type: Object
Name: ZGData.data
Description: The data from the copied cell(s)
Type: String
Name: ZGData.copiedValue
Description: The string that was copied.

Demo

cell:rightclick

Version 1.x Version 2.x

Description

Fires the event when right click occurs on a cell.

Important Return Values

Type: Object
Name: ZGData.cell
Description: The relevant DOM cell.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The column position index.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: String
Name: ZGData.recordIndex
Description: The current record index.
Type: String
Name: ZGData.type
Description: The column type (default is text).
Type: String
Name: ZGData.value
Description: The value of the cell.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

Column Events

<zg-column> refers to the columns of the grid. Events triggered by columns are <zg-column> events.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('column:click', function(e) {
  console.log('--- (column:click) event fired ---', e);
});

column:click

Version 1.x Version 2.x

Description

Fires event when click on a column.

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

column:filter

Version 1.x Version 2.x

Description

Fires the event when a column is filtered.

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: ZGData.filterIndex
Description: The index that the filter is applied to e.g. "firstName".
Type: String
Name: ZGData.filterValue
Description: The current filter value from an inline.
Type: String
Name: ZGData.filterType
Description: The method in which the filter was triggered: inline | menu
Type: String
Name: ZGData.filterValues
Description: JSON array of conditionals
Type: String
Name: ZGData.selectValues
Description: JSON array of selected value matches
Type: String
Name: ZGData.filterBoolean
Description: 'and' | 'or' indicated how to process multiple fitlerValues
Type: Boolean
Name: ZGData.filterMatchCase
Description: Indicates if the match case indicator is turned on for the filter

Demo

column:filter:menu:close

Version 1.x Version 2.x

Description

Fires the event when a filter menu is closed.

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: ZGData.filterIndex
Description: The index that the filter would be applied to e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The numerical index on the column that has the filter closed on.
Type: Object
Name: ZGTarget
Description: A reference to the DOM Filter Menu.

Demo

column:filter:menu:open

Version 1.x Version 2.x

Description

Fires the event when a filter menu is opened

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: ZGData.filterIndex
Description: The index that the filter would be applied to e.g. "firstName".
Type: Number
Name: ZGData.columnIndex
Description: The numerical index on the column that has the filter opened on.
Type: Object
Name: ZGTarget
Description: A reference to the DOM Filter Menu.

Demo

column:mouseout

Version 1.x Version 2.x

Description

Fires event when mouseout on a column.

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

column:mouseover

Version 1.x Version 2.x

Description

Fires event when mouseover on a column.

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

column:move

Version 1.x Version 2.x

Description

Fires the event when a column is moved to a frozen spot or within a frame

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The fieldIndex of the moved column
Type: Number
Name: ZGData.oldIndex
Description: The old numerical index of the moved column
Type: Number
Name: ZGData.newIndex
Description: The new numerical index of the moved column
Type: String
Name: ZGData.frozen
Description: The frozen state of the moved column

Demo

column:togglevisibility

Version 1.x Version 2.x

Description

Fires the event when a column is hidden or shown

Important Return Values

Type: String
Name: ZGData.fieldIndex
Description: The fieldIndex of the moved column
Type: Boolean
Name: ZGData.hidden
Description: Indicates if the column is hidden

Demo

Data Events

<zg-data> events relate to data and any changes made to a record.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('data:load', function(e) {
  console.log('--- (data:load) event fired ---', e);
});

data:afterfetch

Version 1.x Version 2.x

Description

Fires the event every time data is fetched

Important Return Values

Type: Object
Name: ZGData.response
Description: All of the fetch response data
Type: Object
Name: ZGData.data
Description: The raw data from the response

Demo

data:cell:beforechange

Version 1.x Version 2.x

Description

Fires the event before a single cell value is changed.

Important Return Values

Type: Object
Name: DOMCell
Description: The DOM cell that was updated.
Type: Object
Name: data
Description: The data object associated with that record.
Type: String
Name: fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: newValue
Description: The new value of the cell.
Type: String
Name: oldValue
Description: The old value of the cell.
Type: String
Name: recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:cell:change

Version 1.x Version 2.x

Description

Fires the event after a single cell value is changed.

Important Return Values

Type: Object
Name: DOMCell
Description: The DOM cell that was updated.
Type: Object
Name: data
Description: The data object associated with that record.
Type: String
Name: fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: newValue
Description: The new value of the cell.
Type: String
Name: oldValue
Description: The old value of the cell.
Type: String
Name: recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:load

Version 1.x Version 2.x

Description

Fires the event every time a new dataset is loaded in the grid.

Important Return Values

Null

Demo

data:record:beforechange

Version 1.x Version 2.x

Description

Fires the event before a record (row) is changed (edited through row editor as opposed to cell editor).

Important Return Values

Type: Array
Name: changedField
Description: The column indices that were changed e.g. ["firstName","lastName"].
Type: Object
Name: data
Description: The data object associated with that record.
Type: Object
Name: oldData
Description: The old data object associated with that record.
Type: String
Name: recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:record:beforedelete

Version 1.x Version 2.x

Description

Fires the event before a record (row) is deleted from the grid.

Important Return Values

Type: Object
Name: data
Description: The data object associated with that record.
Type: Boolean
Name: batchEdit
Description: Indicates if the action is part of a batch edit
Type: String
Name: recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:record:beforeinsert

Version 1.x Version 2.x

Description

Fires the event before a new record (row) is added to the grid.

Important Return Values

Type: Object
Name: data
Description: The data object associated with that record.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:record:change

Version 1.x Version 2.x

Description

Fires the event after a record (row) is changed (edited through row editor as opposed to cell editor).

Important Return Values

Type: Array
Name: changedField
Description: The column indices that were changed e.g. ["firstName","lastName"].
Type: Object
Name: data
Description: The data object associated with that record.
Type: Object
Name: oldData
Description: The old data object associated with that record.
Type: String
Name: recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:record:delete

Version 1.x Version 2.x

Description

Fires the event when a record (row) is deleted from the grid.

Important Return Values

Type: Object
Name: data
Description: The data object associated with that record.

Demo

data:record:insert

Version 1.x Version 2.x

Description

Fires the event after a new record (row) is added to the grid.

Important Return Values

Type: Object
Name: data
Description: The data object associated with that record.
Type: Number
Name: rowIndex
Description: The index of the row.

Demo

data:record:openinsert

Version 1.x Version 2.x

Description

Fires event when the insert dialog is opened

Important Return Values

Type: String
Name: ZGData.inputContainer
Description: The container for all of the input fields on the new dialog
Type: Object
Name: ZGData.editorFields
Description: An array of references to each label and edit field inside the new dialog
Type: Object
Name: ZGTarget
Description: A reference to the DOM dialog.

Demo

Header Events

<zg-header> events are triggered by the header cell of a column.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('header:click', function(e) {
  console.log('--- (header:click) event fired ---', e);
});

header:click

Version 1.x Version 2.x

Description

Fires event when click on a header cell.

Important Return Values

Type: String
Name: ZGData.cellIndex
Description: The current cell index.
Type: String
Name: ZGData.fieldIndex
Description: The column index e.g. "firstName".
Type: String
Name: ZGData.text
Description: The value of the cell.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

Record Events

A record refers to a row and card in the grid. Events triggered by row and card mode are grouped into record events.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('record:click', function(e) {
  console.log('--- (record:click) event fired ---', e);
});

record:click

Version 1.x Version 2.x

Description

Fires the row:click and record:click event when a click occurs on a record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell click details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.layout
Description: The current layout of the grid, card or row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

record:mouseout

Version 1.x Version 2.x

Description

Fires when the mouse cursor leaves the record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell click details.
Type: String
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.layout
Description: The current layout of the grid, card or row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

record:mouseover

Version 1.x Version 2.x

Description

Fires when the mouse cursor enter the record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell click details.
Type: String
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.layout
Description: The current layout of the grid, card or row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

Row Events

<zg-row> refers to a row in the grid. Events triggered by rows are <zg-row> events.

Example Usage

const zgRef = document.querySelector('zing-grid');
zgRef.addEventListener('row:click', function(e) {
  console.log('--- (row:click) event fired ---', e);
});

row:click

Version 1.x Version 2.x

Description

Fires the row:click and record:click event when a click occurs on a record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

row:detailsclose

Version 2.x

Description

Fires when the row details is closed

Important Return Values

Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index of the row.

Demo

row:detailsopen

Version 2.x

Description

Fires when the row details is opened

Important Return Values

Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index of the row.
Type: Object
Name: ZGTarget
Description: A reference to the opened row-details.

Demo

row:frozen

Version 1.x Version 2.x

Description

Fires when the frozen row state changes

Important Return Values

Type: Object
Name: ZGData.frozenRows
Description: An array of rows frozen in the modified area (top/bottom)
Type: String
Name: ZGData.area
Description: The area the frozen state was changed (top or bottom)
Type: Number
Name: ZGData.currentFrozenRows
Description: The count of rows frozen in the modified area.

Demo

row:mouseout

Version 1.x Version 2.x

Description

Fires the event when mouse is moved out a record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

row:mouseover

Version 1.x Version 2.x

Description

Fires the event when mouse is moved over a record (row).

Important Return Values

Type: Object
Name: ZGData.cell
Description: The cell event details.
Type: Object
Name: ZGData.data
Description: The full data object for the row.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index.
Type: Object
Name: ZGEvent
Description: A reference to the custom ZingGrid internal event.
Type: Object
Name: ZGTarget
Description: A reference to the DOM element.

Demo

row:select

Version 1.x Version 2.x

Description

Fires when the row selector changes

Important Return Values

Type: String
Name: ZGData.selectedRows
Description: An array of currently selected rows
Type: Object
Name: ZGData.data
Description: The full data object for the row selected/unselected.
Type: String
Name: ZGData.recordIndex
Description: The unique identifier for the row selected/unselected, this identifier never changes.
Type: Number
Name: ZGData.rowIndex
Description: The current row index of the selected/unselected row.
Type: Boolean
Name: ZGData.checked
Description: Boolean indicating if the current row was checked or unchecked

Demo

< api: Methods Sandbox

[api: Event Reference]

api: Usage Guide >