Skip to content

How to handle mouse and keyboard events?

zhuxw edited this page Apr 18, 2013 · 10 revisions

All the following mouse and keyboard events are supported for different parts of gridx:

Header HeaderCell Row Cell RowHeaderHeader RowHeaderCell
MouseOver Y Y Y Y Y Y
MouseOut Y Y Y Y Y Y
MouseDown Y Y Y Y Y Y
MouseUp Y Y Y Y Y Y
Click Y Y Y Y Y Y
DblClick Y Y Y Y Y Y
ContextMenu Y Y Y Y Y Y
KeyDown Y Y Y Y Y Y
KeyUp Y Y Y Y Y Y
KeyPress Y Y Y Y Y Y

The naming convertion is: "on" + regionName + eventName. For example: "onCellClick", "onHeaderCellMouseOver", "onRowKeyDown", "onRowHeaderHeaderClick".

Note the "RowHeaderHeader" and "RowHeaderCell" events are only available when the gridx/modules/RowHeader is used.

To add handler for any of these events, just connect it on the grid object:

grid.connect(grid, "onCellMouseOver", function(evt){
     // your handler logic here.
});

Note it is a good practice to use grid.connect instead of dojo.connect, because grid as a widget can automatically disconnect all the event connections when it is destroyed, so that memory leak can be avoided.

An event object is passed to your handler function, in which several useful properties are already available:

Description Available on
evt.rowId The ID of the current row Cell, Row, RowHeaderCell
evt.rowIndex The index of the current row under its parent Cell, Row, RowHeaderCell
evt.parentId The ID of the parent row of the current row Cell, Row, RowHeaderCell
evt.visualIndex The visual index of the current row Cell, Row, RowHeaderCell
evt.columnId The ID of the current column Cell, HeaderCell
evt.columnIndex The index of the current column Cell, HeaderCell
evt.cellNode The DOM node of the current cell Cell
evt.headerCellNode The DOM node of the current header cell HeaderCell
evt.rowHeaderCellNode The DOM node of the current row header cell RowHeaderCell, Row (when isRowHeader is true)
evt.isRowHeader Whether this event is fired from row header RowHeaderCell, Row (when isRowHeader is true)

With the above information, you can easily get whatever you want. For example:

var cell = grid.cell(evt.rowId, evt.columnId, true);
var cellData = cell.data();
var isRowSelected = cell.row.isSelected();
var headerName = cell.column.name();