--- title: "API Events | Docs" description: "ZingGrid comes with its own set of events. Many of these events help signal when the grid or its components are rendered, or when an interaction occurs." url: https://www.zinggrid.com/docs/api/events/reference --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/events/reference.md mode: provenance representation: markdown origin_response_id: 54929eaaf55d63089991bb0fbf83f5e1 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.597Z version_nonce: cd7ebe913272aedfefc7ec0c12a9eaec generated_at_utc: 2026-10-22T21:09:37.643Z response_nonce: a45c3ec28b1eb9d61487ced1a50e7468 ``` # 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](https://www.zinggrid.com/docs/api/events/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** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.executeOnLoad(() => { // apply ZingGrid methods in here like data: zgRef.setData(); }); ``` ## Grid Events **zing-grid** refers to the `` element, and its associated events target the entire grid as a whole. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('grid:ready', function(e) { console.log('--- (grid:ready) event fired ---', e); }); ``` ### grid:beforerender Fires the event once before the grid renders. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/1LW0Y3IJ) ### grid:contextmenuclose Fires the event when the contextmenu is closed. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/5HOE3VVY) ### grid:contextmenuopen Fires the event when the contextmenu is opened. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/DEZC9FG9) ### grid:deselect Fires the event when selection is deselected in the grid. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/ANIPLA5G) ### grid:hydrate Fires the event when the pre-rendered grid is finished being hydrated. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/ZXLKFSXX) ### grid:keydown:esc Fires the event when the (Esc) key is pressed. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/EVFXSLSR) ### grid:pagechange Fires the event when a page changes in the grid. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/LD0VIDBT) ### grid:pagefirst Fires the event when the grid changes to the first page. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/PMNIA14U) ### grid:pagelast Fires the event when the grid changes to the last page. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/U0GLM0S7) ### grid:pagenext Fires the event when the grid changes to the next page. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/FAIUS72C) ### grid:pageprev Fires the event when the grid changes to the previous page. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/RME68BWF) ### grid:pagesizechange Fires the event when the `page-size` (amount of rows displaying) changes on the grid. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.currentPage` (Number): The current page index. - `ZGData.oldPageSize` (Number): The old `page-size` of the grid. - `ZGData.pageSize` (Number): The current `page-size` of the grid. [Example code](https://app.zingsoft.com/demos/embed/WQGF796I) ### grid:ready Fires the grid ready event when grid is ready. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/ZDTAAQXR) ### grid:refresh Fires the event when the grid is refreshed through grid controls or API method `refresh()`. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/3JI8UNVU) ### grid:render Fires the event once when grid renders. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/USHZFVZN) ### grid:scroll Fires the event when scrolling occurs in grid. Supported versions: 1.x, 2.x. **Event detail** - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/D19Y78UK) ### grid:search Fires the event when a the grid is searched. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.searchTerm` (String): The current search term. - `ZGData.searchResults` (Array): The Array of search results - `ZGData.searchCount` (Number): The length of the search results [Example code](https://app.zingsoft.com/demos/embed/C4FKT08Z) ### grid:select Fires the event when selection is made in the grid. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.columnEnd` (Number): The column where the selection ends. - `ZGData.columnStart` (Number): The column where the selection starts. - `ZGData.selectedData` (String | Array): A string for a single cell and array for multiple cells being selected. - `ZGData.rowEnd` (String): The row where the selection ends. - `ZGData.rowStart` (String): The row where the selection starts. - `ZGData.DOMCell` (Object): The single selected cell. If multiple cells are selected, this will have the first one. Use cells to access the rest. - `ZGData.DOMCells` (Array): An array of the selected cells. If only one cell is selected, it is still in an array. [Example code](https://app.zingsoft.com/demos/embed/XQRDEBJD) ### grid:selectall Fires the event when selecting every cell (ctrl+a) in the grid. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/9YAZTONZ) ### grid:sort Fires the event when a the grid is sorted Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The index of the sorted column - `ZGData.order` (Array): Which direction the index is sorted [Example code](https://app.zingsoft.com/demos/embed/C4FKT08Z) ## Card Events `` events are events that target the grid as a whole. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('card:click', function(e) { console.log('--- (card:click) event fired ---', e); }); ``` ### card:click Fires the `card:click` and `record:click` event when a click occurs on a record (card). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/3I2P58D2) ### card:mouseout Fires the event when mouse is moved out a record (card). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/FDY5N5W2) ### card:mouseover Fires the event when mouse is moved over a record (card). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/OOMRFHVT) ## Cell Events `` events are events that are triggered by each individual cell of the grid. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('cell:click', function(e) { console.log('--- (cell:click) event fired ---', e); }); ``` ### cell:beforecopy 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 Supported versions: 1.x, 2.x. **Event detail** - `ZGData.data` (Object): The data from the copied cell(s) - `ZGData.copiedValue` (String): The string that will be copied. Can be changed ### cell:beforerender Fires the event before a cell is rendered. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.columnIndex` (Number): The numerical index of the column. - `ZGData.data` (Object): The full data object for the cell. - `ZGData.DOMCell` (Object): The DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.rowIndex` (Number): The numerical index of the row. [Example code](https://app.zingsoft.com/demos/embed/MC39A3I1) ### cell:click Fires the event when a click occurs to a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.DOMCell` (Object): The relevant DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.columnIndex` (Number): The column position index. - `ZGData.rowIndex` (Number): The current row index. - `ZGData.recordIndex` (String): The current record index. - `ZGData.type` (String): The column type (default is text). - `ZGData.value` (String): The value of the cell. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/N4Y1NSIY) ### cell:closeedit Fires the event when the cell editor is closed. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.canceled` (Boolean): If the user canceled instead of saving the cell edit. - `ZGData.columnIndex` (Number): The numerical index of the column. - `ZGData.data` (Object): The full data object for the cell. - `ZGData.DOMCell` (Object): The DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.newValue` (String): The new value of the cell after editing. - `ZGData.rowIndex` (Number): The numerical index of the row. [Example code](https://app.zingsoft.com/demos/embed/M5M9PT9O) ### cell:copy Fires the event when copying (ctrl+c) occurs in a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.data` (Object): The data from the copied cell(s) - `ZGData.copiedValue` (String): The string that was copied. [Example code](https://app.zingsoft.com/demos/embed/OX0X5IFJ) ### cell:mouseout Fires the event when mouse is moved out of a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The relevant DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.columnIndex` (Number): The column position index. - `ZGData.rowIndex` (Number): The current row index. - `ZGData.recordIndex` (String): The current record index. - `ZGData.type` (String): The column type (default is text). - `ZGData.value` (String): The value of the cell. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/MMOPILFC) ### cell:mouseover Fires the event when mouse is moved over a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The relevant DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.columnIndex` (Number): The column position index. - `ZGData.rowIndex` (Number): The current row index. - `ZGData.recordIndex` (String): The current record index. - `ZGData.type` (String): The column type (default is text). - `ZGData.value` (String): The value of the cell. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/HPXXGU88) ### cell:openedit Fires the event when the cell editor is opened. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.columnIndex` (Number): The numerical index of the column. - `ZGData.data` (Object): The full data object for the cell. - `ZGData.DOMCell` (Object): The DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.rowIndex` (Number): The numerical index of the row. [Example code](https://app.zingsoft.com/demos/embed/XTZM2IN7) ### cell:paste Fires the event when pasting (ctrl+p) occurs in a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.data` (Object): The data from the copied cell(s) - `ZGData.copiedValue` (String): The string that was copied. [Example code](https://app.zingsoft.com/demos/embed/MOQBDKCP) ### cell:rightclick Fires the event when right click occurs on a cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The relevant DOM cell. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.columnIndex` (Number): The column position index. - `ZGData.rowIndex` (Number): The current row index. - `ZGData.recordIndex` (String): The current record index. - `ZGData.type` (String): The column type (default is text). - `ZGData.value` (String): The value of the cell. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/PZHZSFGS) ## Column Events `` refers to the columns of the grid. Events triggered by columns are `` events. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('column:click', function(e) { console.log('--- (column:click) event fired ---', e); }); ``` ### column:click Fires event when click on a column. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/G1LTDI56) ### column:filter Fires the event when a column is filtered. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.filterIndex` (String): The index that the filter is applied to e.g. "firstName". - `ZGData.filterValue` (String): The current filter value from an inline. - `ZGData.filterType` (String): The method in which the filter was triggered: inline | menu - `ZGData.filterValues` (String): JSON array of conditionals - `ZGData.selectValues` (String): JSON array of selected value matches - `ZGData.filterBoolean` (String): 'and' | 'or' indicated how to process multiple fitlerValues - `ZGData.filterMatchCase` (Boolean): Indicates if the match case indicator is turned on for the filter [Example code](https://app.zingsoft.com/demos/embed/8FMB5J78) ### column:filter:menu:close Fires the event when a filter menu is closed. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.filterIndex` (String): The index that the filter would be applied to e.g. "firstName". - `ZGData.columnIndex` (Number): The numerical index on the column that has the filter closed on. - `ZGTarget` (Object): A reference to the DOM Filter Menu. [Example code](https://app.zingsoft.com/demos/embed/WAEQCTSK) ### column:filter:menu:open Fires the event when a filter menu is opened Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.filterIndex` (String): The index that the filter would be applied to e.g. "firstName". - `ZGData.columnIndex` (Number): The numerical index on the column that has the filter opened on. - `ZGTarget` (Object): A reference to the DOM Filter Menu. [Example code](https://app.zingsoft.com/demos/embed/NCF1EFRM) ### column:mouseout Fires event when mouseout on a column. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/YUGN3NN0) ### column:mouseover Fires event when mouseover on a column. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/ZLKD91AZ) ### column:move Fires the event when a column is moved to a frozen spot or within a frame Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The fieldIndex of the moved column - `ZGData.oldIndex` (Number): The old numerical index of the moved column - `ZGData.newIndex` (Number): The new numerical index of the moved column - `ZGData.frozen` (String): The frozen state of the moved column [Example code](https://app.zingsoft.com/demos/embed/TCRV6L78) ### column:togglevisibility Fires the event when a column is hidden or shown Supported versions: 1.x, 2.x. **Event detail** - `ZGData.fieldIndex` (String): The fieldIndex of the moved column - `ZGData.hidden` (Boolean): Indicates if the column is hidden [Example code](https://app.zingsoft.com/demos/embed/0865V962) ## Data Events `` events relate to data and any changes made to a record. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('data:load', function(e) { console.log('--- (data:load) event fired ---', e); }); ``` ### data:afterfetch Fires the event every time data is fetched Supported versions: 1.x, 2.x. **Event detail** - `ZGData.response` (Object): All of the fetch response data - `ZGData.data` (Object): The raw data from the response [Example code](https://app.zingsoft.com/demos/embed/EIBC7929) ### data:cell:beforechange Fires the event before a single cell value is changed. Supported versions: 1.x, 2.x. **Event detail** - `DOMCell` (Object): The DOM cell that was updated. - `data` (Object): The data object associated with that record. - `fieldIndex` (String): The column index e.g. "firstName". - `newValue` (String): The new value of the cell. - `oldValue` (String): The old value of the cell. - `recordIndex` (String): The unique identifier for the row, this identifier never changes. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/AXA7XIC2) ### data:cell:change Fires the event after a single cell value is changed. Supported versions: 1.x, 2.x. **Event detail** - `DOMCell` (Object): The DOM cell that was updated. - `data` (Object): The data object associated with that record. - `fieldIndex` (String): The column index e.g. "firstName". - `newValue` (String): The new value of the cell. - `oldValue` (String): The old value of the cell. - `recordIndex` (String): The unique identifier for the row, this identifier never changes. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/XRY6DHYJ) ### data:load Fires the event every time a new dataset is loaded in the grid. Supported versions: 1.x, 2.x. [Example code](https://app.zingsoft.com/demos/embed/EAHH0K0C) ### data:record:beforechange Fires the event before a record (row) is changed (edited through row editor as opposed to cell editor). Supported versions: 1.x, 2.x. **Event detail** - `changedField` (Array): The column indices that were changed e.g. ["firstName","lastName"]. - `data` (Object): The data object associated with that record. - `oldData` (Object): The old data object associated with that record. - `recordIndex` (String): The unique identifier for the row, this identifier never changes. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/X9G7WCT6) ### data:record:beforedelete Fires the event before a record (row) is deleted from the grid. Supported versions: 1.x, 2.x. **Event detail** - `data` (Object): The data object associated with that record. - `batchEdit` (Boolean): Indicates if the action is part of a batch edit - `recordIndex` (String): The unique identifier for the row, this identifier never changes. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/5LPMYI4F) ### data:record:beforeinsert Fires the event before a new record (row) is added to the grid. Supported versions: 1.x, 2.x. **Event detail** - `data` (Object): The data object associated with that record. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/95KH1Z2U) ### data:record:change Fires the event after a record (row) is changed (edited through row editor as opposed to cell editor). Supported versions: 1.x, 2.x. **Event detail** - `changedField` (Array): The column indices that were changed e.g. ["firstName","lastName"]. - `data` (Object): The data object associated with that record. - `oldData` (Object): The old data object associated with that record. - `recordIndex` (String): The unique identifier for the row, this identifier never changes. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/TPM8ZZH7) ### data:record:delete Fires the event when a record (row) is deleted from the grid. Supported versions: 1.x, 2.x. **Event detail** - `data` (Object): The data object associated with that record. [Example code](https://app.zingsoft.com/demos/embed/NXAB4Z1Q) ### data:record:insert Fires the event after a new record (row) is added to the grid. Supported versions: 1.x, 2.x. **Event detail** - `data` (Object): The data object associated with that record. - `rowIndex` (Number): The index of the row. [Example code](https://app.zingsoft.com/demos/embed/033EHETB) ### data:record:openinsert Fires event when the insert dialog is opened Supported versions: 1.x, 2.x. **Event detail** - `ZGData.inputContainer` (String): The container for all of the input fields on the new dialog - `ZGData.editorFields` (Object): An array of references to each label and edit field inside the new dialog - `ZGTarget` (Object): A reference to the DOM dialog. [Example code](https://app.zingsoft.com/demos/embed/N0650LRP) ## Header Events `` events are triggered by the header cell of a column. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('header:click', function(e) { console.log('--- (header:click) event fired ---', e); }); ``` ### header:click Fires event when click on a header cell. Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cellIndex` (String): The current cell index. - `ZGData.fieldIndex` (String): The column index e.g. "firstName". - `ZGData.text` (String): The value of the cell. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/ENV6PPDP) ## 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** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('record:click', function(e) { console.log('--- (record:click) event fired ---', e); }); ``` ### record:click Fires the `row:click` and `record:click` event when a click occurs on a record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell click details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.layout` (String): The current layout of the grid, card or row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/YAZ15POU) ### record:mouseout Fires when the mouse cursor leaves the record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell click details. - `ZGData.data` (String): The full data object for the row. - `ZGData.layout` (String): The current layout of the grid, card or row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/4O4TXH1M) ### record:mouseover Fires when the mouse cursor enter the record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell click details. - `ZGData.data` (String): The full data object for the row. - `ZGData.layout` (String): The current layout of the grid, card or row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/CM6R6738) ## Row Events `` refers to a row in the grid. Events triggered by rows are `` events. **Example Usage** ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.addEventListener('row:click', function(e) { console.log('--- (row:click) event fired ---', e); }); ``` ### row:click Fires the `row:click` and `record:click` event when a click occurs on a record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/6VM972JP) ### row:detailsclose Fires when the row details is closed Supported versions: 2.x. **Event detail** - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index of the row. [Example code](https://app.zingsoft.com/demos/embed/Q7MRAZ5J) ### row:detailsopen Fires when the row details is opened Supported versions: 2.x. **Event detail** - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index of the row. - `ZGTarget` (Object): A reference to the opened row-details. [Example code](https://app.zingsoft.com/demos/embed/88LZ4A0I) ### row:frozen Fires when the frozen row state changes Supported versions: 1.x, 2.x. **Event detail** - `ZGData.frozenRows` (Object): An array of rows frozen in the modified area (top/bottom) - `ZGData.area` (String): The area the frozen state was changed (top or bottom) - `ZGData.currentFrozenRows` (Number): The count of rows frozen in the modified area. [Example code](https://app.zingsoft.com/demos/embed/QMTBKS5H) ### row:mouseout Fires the event when mouse is moved out a record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/FDY5N5W2) ### row:mouseover Fires the event when mouse is moved over a record (row). Supported versions: 1.x, 2.x. **Event detail** - `ZGData.cell` (Object): The cell event details. - `ZGData.data` (Object): The full data object for the row. - `ZGData.recordIndex` (String): The unique identifier for the row, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index. - `ZGEvent` (Object): A reference to the custom ZingGrid internal event. - `ZGTarget` (Object): A reference to the DOM element. [Example code](https://app.zingsoft.com/demos/embed/OOMRFHVT) ### row:select Fires when the row selector changes Supported versions: 1.x, 2.x. **Event detail** - `ZGData.selectedRows` (String): An array of currently selected rows - `ZGData.data` (Object): The full data object for the row selected/unselected. - `ZGData.recordIndex` (String): The unique identifier for the row selected/unselected, this identifier never changes. - `ZGData.rowIndex` (Number): The current row index of the selected/unselected row. - `ZGData.checked` (Boolean): Boolean indicating if the current row was checked or unchecked [Example code](https://app.zingsoft.com/demos/embed/GUHGHX28)