AG Grid is designed to work on touch devices. By default, browsers convert tap events to mouse click events. This means, for example, if you tap on a cell in AG Grid, the cell will get selected just like you clicked on the cell with a mouse. The remainder of this page explains touch gestures understood by the grid which are NOT simply the grid reacting to taps as mouse clicks. They are touch gestures coded into the grid.
Touch Gestures for AG Grid Community
The following touch gestures are supported by AG Grid Community.
- Move columns by touch-dragging the column header with a touch.
- Move column groups by touch-dragging the column group header with a touch.
- Tap the column header to sort by that column.
- Tap and hold the column header for 500ms to bring up the column menu.
- Tap and drag the column header resize handle to resize it
Touch Gestures for AG Grid Enterprise
The following touch gestures are support by AG Grid Enterprise - these are in addition to the AG Grid Community gestures mentioned above - they are relevant to AG Grid Enterprise only features.
- Drag columns out of the tool panel using drag.
- Drag columns out of the row group and pivot drop zones by dragging.
Enabling Double Clicking on Mobile Devices
The default behaviour on many mobile devices when a page is double clicked on it to zoom in. To prevent this behaviour so that a double click would, for example, edit a cell you need to disable viewport zooming.
You can disable viewport zooming by setting the following tag at the top level page:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Column Menu Touch Configuration
The column menu icon in the default column menu is always displayed. However, if you are using the legacy column menu, the column menu icon is hidden by default and only appears on mouseover. On touch devices, this mouseover behaviour is not possible so it is displayed via tap and hold on the column header.
If you are using the legacy column menu and need a visual indicator to inform the user that a menu exists, you can set the grid option suppressMenuHide = true. Note that when this is enabled, the default tap and hold behaviour will no longer apply, and the column menu icon must be tapped instead.
See Legacy Column Menu for more information.
This is demonstrated in the following example:
Custom Header Components
If using custom header components with interactive elements, the grid may consume the touch events in order to support the behaviour above. To prevent this, either the grid touch support can be disabled by setting the grid option suppressTouch = true, or the custom header component can stop propagation on the touchstart event.