GridElementEvents

Configs

enableUndoRedoKeys: Boolean= trueAlso a property

Set to true to listen for CTRL-Z (CMD-Z on Mac OS) keyboard event and trigger undo (redo when SHIFT is pressed). Only applicable when using a StateTrackingManager.

hoverCls: String= b-hover

A CSS class to add to hovered row elements

longPressTime: Number= 400Also a property

Time in ms until a longpress is triggered

Properties

Class hierarchy

isGridElementEvents: Boolean= truereadonly

Identifies an object as an instance of GridElementEvents class, or subclass thereof.

isGridElementEvents: Boolean= truereadonlystatic

Identifies an object as an instance of GridElementEvents class, or subclass thereof.

Misc

enableUndoRedoKeys: Boolean= trueAlso a config

Set to true to listen for CTRL-Z (CMD-Z on Mac OS) keyboard event and trigger undo (redo when SHIFT is pressed). Only applicable when using a StateTrackingManager.

hoveredCell: HTMLElementreadonly

The currently hovered grid cell

longPressTime: Number= 400Also a config

Time in ms until a longpress is triggered

Events

cellClick

Fired when user clicks in a grid cell

// Adding a listener using the "on" method
gridElementEvents.on('cellClick', ({ grid, record, column, cellElement, target, event }) => {

});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

cellContextMenu

Fired when user activates contextmenu in a grid cell

// Adding a listener using the "on" method
gridElementEvents.on('cellContextMenu', ({ grid, record, column, cellElement, target, event }) => {

});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

cellDblClick

Fired when user double clicks a grid cell

// Adding a listener using the "on" method
gridElementEvents.on('cellDblClick', ({ grid, record, column, cellElement, target, event }) => {

});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

cellMouseEnter

Fired when the mouse enters a cell

// Adding a listener using the "on" method
gridElementEvents.on('cellMouseEnter', ({ source, record, column, cellElement, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the hovered cell
`column`	Column	The column currently hovered
`cellElement`	HTMLElement	The cell HTML element
`event`	MouseEvent	The native DOM event

cellMouseLeave

Fired when the mouse leaves a cell

// Adding a listener using the "on" method
gridElementEvents.on('cellMouseLeave', ({ source, record, column, cellElement, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the cell that the mouse left
`column`	Column	The column representing the cell that the mouse left
`cellElement`	HTMLElement	The cell HTML element that the mouse left
`event`	MouseEvent	The native DOM event

cellMouseOut

Fired when a user moves the mouse out of a grid cell

// Adding a listener using the "on" method
gridElementEvents.on('cellMouseOut', ({ grid, record, column, cellElement, target, event }) => {

});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

cellMouseOver

Fired when user moves the mouse over a grid cell

// Adding a listener using the "on" method
gridElementEvents.on('cellMouseOver', ({ grid, record, column, cellElement, target, event }) => {

});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

headerClick

Fired when a grid header is clicked on.

Returning false from a handler prevents any features (such as Sort) from recieving and processing the click event.

// Adding a listener using the "on" method
gridElementEvents.on('headerClick', ({ domEvent, column }) => {

});

Parameter	Type	Description
`domEvent`	Event	The triggering DOM event.
`column`	Column	The column clicked on.

mouseOut

Mouse moved out from element in grid

// Adding a listener using the "on" method
gridElementEvents.on('mouseOut', ({ event }) => {

});

Parameter	Type	Description
`event`	MouseEvent	The native browser event

mouseOver

Mouse moved in over element in grid

// Adding a listener using the "on" method
gridElementEvents.on('mouseOver', ({ event }) => {

});

Parameter	Type	Description
`event`	MouseEvent	The native browser event

rowMouseEnter

Fired when the mouse enters a row

// Adding a listener using the "on" method
gridElementEvents.on('rowMouseEnter', ({ source, record, column, cellElement, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the hovered row
`column`	Column	The column currently hovered
`cellElement`	HTMLElement	The cell HTML element
`event`	MouseEvent	The native DOM event

rowMouseLeave

Fired when the mouse leaves a row

// Adding a listener using the "on" method
gridElementEvents.on('rowMouseLeave', ({ source, record, cellElement, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the row that the mouse left
`cellElement`	HTMLElement	The cell HTML element that the mouse left
`event`	MouseEvent	The native DOM event

Event handlers

onCellClick

Called when user clicks in a grid cell

new GridElementEvents({
    onCellClick({ grid, record, column, cellElement, target, event }) {

    }
});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

onCellContextMenu

Called when user activates contextmenu in a grid cell

new GridElementEvents({
    onCellContextMenu({ grid, record, column, cellElement, target, event }) {

    }
});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

onCellDblClick

Called when user double clicks a grid cell

new GridElementEvents({
    onCellDblClick({ grid, record, column, cellElement, target, event }) {

    }
});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

onCellMouseEnter

Called when the mouse enters a cell

new GridElementEvents({
    onCellMouseEnter({ source, record, column, cellElement, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the hovered cell
`column`	Column	The column currently hovered
`cellElement`	HTMLElement	The cell HTML element
`event`	MouseEvent	The native DOM event

onCellMouseLeave

Called when the mouse leaves a cell

new GridElementEvents({
    onCellMouseLeave({ source, record, column, cellElement, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the cell that the mouse left
`column`	Column	The column representing the cell that the mouse left
`cellElement`	HTMLElement	The cell HTML element that the mouse left
`event`	MouseEvent	The native DOM event

onCellMouseOut

Called when a user moves the mouse out of a grid cell

new GridElementEvents({
    onCellMouseOut({ grid, record, column, cellElement, target, event }) {

    }
});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

onCellMouseOver

Called when user moves the mouse over a grid cell

new GridElementEvents({
    onCellMouseOver({ grid, record, column, cellElement, target, event }) {

    }
});

Parameter	Type	Description
`grid`	Grid	The grid instance
`record`	Model	The record representing the row
`column`	Column	The column to which the cell belongs
`cellElement`	HTMLElement	The cell HTML element
`target`	HTMLElement	The target element
`event`	MouseEvent	The native DOM event

onHeaderClick

Called when a grid header is clicked on.

Returning false from a handler prevents any features (such as Sort) from recieving and processing the click event.

new GridElementEvents({
    onHeaderClick({ domEvent, column }) {

    }
});

Parameter	Type	Description
`domEvent`	Event	The triggering DOM event.
`column`	Column	The column clicked on.

onMouseOut

Mouse moved out from element in grid

new GridElementEvents({
    onMouseOut({ event }) {

    }
});

Parameter	Type	Description
`event`	MouseEvent	The native browser event

onMouseOver

Mouse moved in over element in grid

new GridElementEvents({
    onMouseOver({ event }) {

    }
});

Parameter	Type	Description
`event`	MouseEvent	The native browser event

onRowMouseEnter

Called when the mouse enters a row

new GridElementEvents({
    onRowMouseEnter({ source, record, column, cellElement, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the hovered row
`column`	Column	The column currently hovered
`cellElement`	HTMLElement	The cell HTML element
`event`	MouseEvent	The native DOM event

onRowMouseLeave

Called when the mouse leaves a row

new GridElementEvents({
    onRowMouseLeave({ source, record, cellElement, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance
`record`	Model	The record representing the row that the mouse left
`cellElement`	HTMLElement	The cell HTML element that the mouse left
`event`	MouseEvent	The native DOM event