Docs Version 1

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

Description

Fires the event once before the grid renders.

Important Return Values

Null

Demo

grid:contextmenuclose

Description

Fires the event when the contextmenu is closed.

Important Return Values

Null

Demo

grid:contextmenuopen

Description

Fires the event when the contextmenu is opened.

Important Return Values

Null

Demo

grid:deselect

Description

Fires the event when selection is deselected in the grid.

Important Return Values

Null

Demo

grid:hydrate

Description

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

Important Return Values

Null

Demo

grid:keydown:esc

Description

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

Important Return Values

Null

Demo

grid:pagechange

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

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

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

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

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

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

Description

Fires the grid ready event when grid is ready.

Important Return Values

Null

Demo

grid:refresh

Description

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

Important Return Values

Null

Demo

grid:render

Description

Fires the event once when grid renders.

Important Return Values

Null

Demo

grid:scroll

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

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

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

Description

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

Important Return Values

Null

Demo

grid:sort

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Demo

column:mouseout

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

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

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

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

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

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

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

Description

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

Important Return Values

Null

Demo

data:record:beforechange

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

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

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

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

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

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

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

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

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

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

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

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:frozen

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

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

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

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: Event Reference]

On This Page