How to handle mouse and keyboard events?

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, there are 4 ways to accomplish it:

dojo/on

require(['dojo/on'], function(on){
	on(grid.domNode, 'rowClick', function(e){
		//your handler logic here...
	})
})

grid.on

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

dojo/connect

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

grid.connect

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

###Tips:

• Using on has different event name with using connect. In dojo/on or grid.on, you can should remove the prefix on. For example, in dojo/connect the event name is 'onRowClick' while you should use 'rowClick' instead in dojo/on.

• It is a good practice to use grid.connect or grid.on instead of dojo.connect and dojo/on, 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();