{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/keyboard-navigation/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid responds to keyboard interactions from the user as well as emitting events when key presses happen on the grid cells. Below shows all the keyboards interactions that can be done with the grid."}]},{"type":"element","tagName":"h2","properties":{"id":"navigation","style":"position:relative;"},"children":[{"type":"text","value":"Navigation"},{"type":"element","tagName":"a","properties":{"href":"#navigation","ariaLabel":"navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use the arrow keys ("},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"←"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↑"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"→"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↓"}]},{"type":"text","value":") to move focus up, down, left and right. If the focused cell is already on the boundary for that position (e.g. if on the first column and the left key is pressed) then the key press has no effect. Use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"←"}]},{"type":"text","value":" to move to the start of the line, and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"→"}]},{"type":"text","value":" to move to the end."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a cell on the first grid row is focused and you press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↑"}]},{"type":"text","value":", the focus will be moved into the grid header. The header navigation focus navigation works the same as the grid's: arrows will move up/down/left/right, "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" will move the focus horizontally until the last header cell and then move on to the next row."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Up"}]},{"type":"text","value":" and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Down"}]},{"type":"text","value":" to move the scroll up and down by one page. Use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Home"}]},{"type":"text","value":" and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"End"}]},{"type":"text","value":" to go to the first and last rows."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a header cell is focused, commands like "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Up"}]},{"type":"text","value":", "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Down"}]},{"type":"text","value":", "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Home"}]},{"type":"text","value":", "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"End"}]},{"type":"text","value":", "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"←"}]},{"type":"text","value":"/"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"→"}]},{"type":"text","value":" will not work as they do when a grid cell is focused."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"groups","style":"position:relative;"},"children":[{"type":"text","value":"Groups"},{"type":"element","tagName":"a","properties":{"href":"#groups","ariaLabel":"groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If on a group element, hitting the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key will expand or collapse the group."}]},{"type":"element","tagName":"h2","properties":{"id":"editing","style":"position:relative;"},"children":[{"type":"text","value":"Editing"},{"type":"element","tagName":"a","properties":{"href":"#editing","ariaLabel":"editing permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pressing the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key on a cell will put the cell into edit mode, if editing is allowed on the cell. This will work for the default cell editor."}]},{"type":"element","tagName":"h2","properties":{"id":"selection","style":"position:relative;"},"children":[{"type":"text","value":"Selection"},{"type":"element","tagName":"a","properties":{"href":"#selection","ariaLabel":"selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pressing the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Space"}]},{"type":"text","value":" key on a cell will select the cells row, or deselect the row if already selected. If multi-select is enabled, then the selection will not remove any previous selections."}]},{"type":"element","tagName":"h2","properties":{"id":"suppress-cell-focus","style":"position:relative;"},"children":[{"type":"text","value":"Suppress Cell Focus"},{"type":"element","tagName":"a","properties":{"href":"#suppress-cell-focus","ariaLabel":"suppress cell focus permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want keyboard navigation turned off, then set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressCellFocus=true"}]},{"type":"text","value":" in the gridOptions."}]},{"type":"element","tagName":"h2","properties":{"id":"header-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Header Navigation"},{"type":"element","tagName":"a","properties":{"href":"#header-navigation","ariaLabel":"header navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid header supports full keyboard navigation, however the behaviour may differ based on the type of header that is currently focused."}]},{"type":"element","tagName":"h3","properties":{"id":"grouped-headers","style":"position:relative;"},"children":[{"type":"text","value":"Grouped Headers"},{"type":"element","tagName":"a","properties":{"href":"#grouped-headers","ariaLabel":"grouped headers permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While navigating grouped headers, if the current grouped header is expandable, pressing "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" will toggle the expanded state of the group."}]},{"type":"element","tagName":"h3","properties":{"id":"normal-headers","style":"position:relative;"},"children":[{"type":"text","value":"Normal Headers"},{"type":"element","tagName":"a","properties":{"href":"#normal-headers","ariaLabel":"normal headers permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Regular headers may have selection checkboxes, sorting functions and menus, so to access all these functions while focusing a header, you can do the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Space"}]},{"type":"text","value":" to toggle the header checkbox selection."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" to toggle the sorting state of that column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" to toggle multi-sort for that column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" to open the menu for the focused header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a menu is open, simply press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Esc"}]},{"type":"text","value":" to close it and the focus will return to the header."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"floating-filters","style":"position:relative;"},"children":[{"type":"text","value":"Floating Filters"},{"type":"element","tagName":"a","properties":{"href":"#floating-filters","ariaLabel":"floating filters permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While navigation the floating filters header with the keyboard pressing left/right the focus will move from header cell to header cell, if you wish to navigate within the cell, press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" to focus the first enabled element within the current floating filter cell, and press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Esc"}]},{"type":"text","value":" to return the focus to the floating filter cell."}]},{"type":"element","tagName":"h2","properties":{"id":"example","style":"position:relative;"},"children":[{"type":"text","value":"Example"},{"type":"element","tagName":"a","properties":{"href":"#example","ariaLabel":"example permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below has grouped headers, headers and floating filters to demonstrate the features mentioned above:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Keyboard Navigation","name":"grid-keyboard-navigation","type":"generated","options":"{ \"enterprise\": true,  \"modules\": [\"clientside\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Custom Navigation"},{"type":"element","tagName":"a","properties":{"href":"#custom-navigation","ariaLabel":"custom navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Most people will be happy with the default navigation the grid does when you use the arrow keys and the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" key. Some people will want to override this (e.g. you may want the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" key to navigate to the cell below, not the cell to the right). To facilitate this, the grid offers four methods: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextCell"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"navigatetonextcell","style":"position:relative;"},"children":[{"type":"text","value":"navigateToNextCell"},{"type":"element","tagName":"a","properties":{"href":"#navigatetonextcell","ariaLabel":"navigatetonextcell permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provide a callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":" if you want to override the arrow key navigation. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"nav","names":"[\"navigateToNextCell\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"tabtonextcell","style":"position:relative;"},"children":[{"type":"text","value":"tabToNextCell"},{"type":"element","tagName":"a","properties":{"href":"#tabtonextcell","ariaLabel":"tabtonextcell permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provide a callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextCell"}]},{"type":"text","value":" if you want to override the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" key navigation. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"nav","names":"[\"tabToNextCell\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"cellposition","style":"position:relative;"},"children":[{"type":"text","value":"CellPosition"},{"type":"element","tagName":"a","properties":{"href":"#cellposition","ariaLabel":"cellposition permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Both functions above use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellPosition"}]},{"type":"text","value":". This is an object that represents a cell in the grid. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"CellPosition"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The functions take a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellPosition"}]},{"type":"text","value":" for current and next cells, as well as returning a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellPosition"}]},{"type":"text","value":" object. The returned "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellPosition"}]},{"type":"text","value":" will be the one the grid puts focus on next. Return the provided "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"nextCellPosition"}]},{"type":"text","value":" to stick with the grid default behaviour. Return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"/"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" to skip the navigation."}]},{"type":"element","tagName":"h3","properties":{"id":"navigatetonextheader","style":"position:relative;"},"children":[{"type":"text","value":"navigateToNextHeader"},{"type":"element","tagName":"a","properties":{"href":"#navigatetonextheader","ariaLabel":"navigatetonextheader permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provide a callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" if you want to override the arrow key navigation. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"nav","names":"[\"navigateToNextHeader\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"tabtonextheader","style":"position:relative;"},"children":[{"type":"text","value":"tabToNextHeader"},{"type":"element","tagName":"a","properties":{"href":"#tabtonextheader","ariaLabel":"tabtonextheader permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provide a callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" if you want to override the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" key navigation. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"nav","names":"[\"tabToNextHeader\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"headerposition","style":"position:relative;"},"children":[{"type":"text","value":"HeaderPosition"},{"type":"element","tagName":"a","properties":{"href":"#headerposition","ariaLabel":"headerposition permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"HeaderPosition"}]},{"type":"text","value":". This is an object that represents a header in the grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"HeaderPosition"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should return the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"HeaderPosition"}]},{"type":"text","value":" you want in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" functions to have it focused. Returning "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" will do nothing (same as focusing the current focused cell), however, doing the same thing in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" will allow the browser default behaviour for "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" to happen. This is useful for tabbing outside of the grid from the last cell or "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" tabbing out of the grid from the first cell."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextCell"}]},{"type":"text","value":" are only called while navigating across grid cells, while\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" are only called while navigating across grid headers.\nIf you need to navigate from one container to another, pass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowIndex: -1"}]},{"type":"text","value":" in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellPosition"}]},{"type":"text","value":"\nor "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerRowIndex: -1"}]},{"type":"text","value":" in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"HeaderPosition"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"example-custom-cell-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Example Custom Cell Navigation"},{"type":"element","tagName":"a","properties":{"href":"#example-custom-cell-navigation","ariaLabel":"example custom cell navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows how to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextCell"}]},{"type":"text","value":",  "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" in practice."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":" swaps the up and down arrow keys."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextCell"}]},{"type":"text","value":" uses tabbing to go up and down rather than right and left."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextHeader"}]},{"type":"text","value":" swaps the up and down arrow keys."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tabToNextHeader"}]},{"type":"text","value":" uses tabbing to go up and down rather than right and left."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a cell in the first grid row is focused, pressing the down arrow will navigate to  the header by passing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowIndex: -1"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a header cell in the last header row is focused, pressing the up arrow will navigate  to the first grid row by passing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerRowIndex: -1"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tabbing/Shift tabbing will move the focus until the first header or the last grid row, but focus will not leave the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Keyboard Navigation","name":"custom-keyboard-navigation","type":"mixed"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-master-detail-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Custom Master Detail Navigation"},{"type":"element","tagName":"a","properties":{"href":"#custom-master-detail-navigation","ariaLabel":"custom master detail navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail/"},"children":[{"type":"text","value":"Master Detail Grids"}]},{"type":"text","value":" grids can contain "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail-custom-detail/"},"children":[{"type":"text","value":"Custom Details"}]},{"type":"text","value":" that have their own renderer and hence will need to implement its own keyboard navigation. An example of this can be seen in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail-custom-detail/#keyboard-navigation"},"children":[{"type":"text","value":"Custom Details Keyboard Navigation Example"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"tabbing-into-the-grid","style":"position:relative;"},"children":[{"type":"text","value":"Tabbing into the Grid"},{"type":"element","tagName":"a","properties":{"href":"#tabbing-into-the-grid","ariaLabel":"tabbing into the grid permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In applications where the grid is embedded into a larger page, by default, when tabbing into the grid, the first column header will be focused."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You could override this behaviour to focus the first grid cell, if that is a preferred scenario using a combination of DOM event listeners and Grid API calls shown in the following code snippet:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| // obtain reference to input element\n| const myInput = document.getElementById(\"my-input\");\n| \n| // intercept key strokes within input element\n| myInput.addEventListener(\"keydown\", event => {\n|     // ignore non tab key strokes\n|     if(event.key !== 'Tab') return;\n| \n|     // prevents tabbing into the url section\n|     event.preventDefault();\n| \n|     // scrolls to the first row\n|     gridApi.ensureIndexVisible(0);\n| \n|     // scrolls to the first column\n|     const firstCol = columnApi.getAllDisplayedColumns()[0];\n|     gridApi.ensureColumnVisible(firstCol);\n| \n|     // sets focus into the first grid cell\n|     gridApi.setFocusedCell(0, firstCol);\n| \n| }, true);\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-tabbing-into-the-grid","style":"position:relative;"},"children":[{"type":"text","value":"Example: Tabbing into the Grid"},{"type":"element","tagName":"a","properties":{"href":"#example-tabbing-into-the-grid","ariaLabel":"example tabbing into the grid permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the following example there is an input box provided to test tabbing into the grid. Notice the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tabbing out of the first input box will gain focus on the first grid cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the first cell is out of view due to either scrolling down (rows) or across (columns), tabbing out of the first input will cause the grid to navigate to the first cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tabbing out of the second input box will have the default behaviour which is to focus the first grid header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the first header is out of view due to horizontal scroll, tabbing into the grid will cause the grid to scroll to focus the first header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Shift-Tabbing out third input (below the grid) will have the default focus behaviour, which is to focus the last element of the grid. This element will vary depending on how many features have been enabled (eg. Row Pagination, Tool Panels, etc...)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Tabbing into the Grid","name":"tabbing-into-grid","type":"mixed"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"keyboard-events","style":"position:relative;"},"children":[{"type":"text","value":"Keyboard Events"},{"type":"element","tagName":"a","properties":{"href":"#keyboard-events","ariaLabel":"keyboard events permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to add custom behaviour to any key event that you want using the grid events "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellKeyPress"}]},{"type":"text","value":" (gets called when a DOM "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"keyPress"}]},{"type":"text","value":" event fires on a cell) and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellKeyDown"}]},{"type":"text","value":" (gets called when a DOM "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"keyDown"}]},{"type":"text","value":" event fires on a cell)."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These keyboard events are monitored by the grid panel, so they will not be fired\nwhen the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"keydown"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"keypress"}]},{"type":"text","value":" happen inside of a popup editor, as popup elements are\nrendered in a different DOM tree."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid events wrap the DOM events and provides additional information such as row and column details."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows processing grid cell keyboard events. The following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each time a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellKeyPress"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellKeyDown"}]},{"type":"text","value":" is fired, the details of the event are logged to the console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the user hits "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"S"}]},{"type":"text","value":" on a row, the row selection is toggled. This is achieved through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellKeyPress"}]},{"type":"text","value":" listener."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Keyboard Events","name":"keyboard-events","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"suppress-keyboard-events","style":"position:relative;"},"children":[{"type":"text","value":"Suppress Keyboard Events"},{"type":"element","tagName":"a","properties":{"href":"#suppress-keyboard-events","ariaLabel":"suppress keyboard events permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to stop the grid acting on particular events. To do this implement "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.suppressHeaderKeyboardEvent"}]},{"type":"text","value":" and/or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.suppressKeyboardEvent"}]},{"type":"text","value":" callback. The callback should return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" if the grid should suppress the events, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" to continue as normal."}]},{"type":"element","tagName":"h3","properties":{"id":"suppressheaderkeyboardevent","style":"position:relative;"},"children":[{"type":"text","value":"suppressHeaderKeyboardEvent"},{"type":"element","tagName":"a","properties":{"href":"#suppressheaderkeyboardevent","ariaLabel":"suppressheaderkeyboardevent permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"header","names":"[\"suppressHeaderKeyboardEvent\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"suppresskeyboardevent","style":"position:relative;"},"children":[{"type":"text","value":"suppressKeyboardEvent"},{"type":"element","tagName":"a","properties":{"href":"#suppresskeyboardevent","ariaLabel":"suppresskeyboardevent permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"columns","names":"[\"suppressKeyboardEvent\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The callback is available as a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/column-properties/#reference-columns-suppressKeyboardEvent"},"children":[{"type":"text","value":"column callback"}]},{"type":"text","value":" (set on the column definition). If you want it to apply to all columns then apply to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef"}]},{"type":"text","value":" property. "}]},{"type":"element","tagName":"h3","properties":{"id":"example-suppress-keyboard-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Example: Suppress Keyboard Navigation"},{"type":"element","tagName":"a","properties":{"href":"#example-suppress-keyboard-navigation","ariaLabel":"example suppress keyboard navigation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates suppressing the following keyboard events:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the Athlete column cells only:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" will not start or stop editing."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the Country column cells only:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↑"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↓"}]},{"type":"text","value":" arrow keys are allowed. This is the only column that allows navigation from the grid to the header."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On all cells (including the cells of the Athlete Column):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"A"}]},{"type":"text","value":" will not select all cells into a range."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"C"}]},{"type":"text","value":" will not copy to clipboard."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"V"}]},{"type":"text","value":" will not paste from clipboard."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"D"}]},{"type":"text","value":" will not copy range down."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Up"}]},{"type":"text","value":" and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Page Down"}]},{"type":"text","value":" will not get handled by the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Home"}]},{"type":"text","value":" will not focus top left cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"End"}]},{"type":"text","value":" will not focus bottom right cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"←"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↑"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"→"}]},{"type":"text","value":" "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"↓"}]},{"type":"text","value":" Arrow keys will not navigate focused cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"F2"}]},{"type":"text","value":" will not start editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Delete"}]},{"type":"text","value":" will not start editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Backspace"}]},{"type":"text","value":" will not start editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Escape"}]},{"type":"text","value":" will not cancel editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Space"}]},{"type":"text","value":" will not select current row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" will not be handled by the grid."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the Country header only:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Navigation is blocked from the left to right using arrows but is allowed using "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Navigation up and down is allowed. This is the only header that allows navigation from the header to the grid cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" is blocked. This is the only header that blocks sorting / opening menu via keyboard."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On all headers (excluding country):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Navigation is blocked up and down, but navigation left / right is allowed using arrows and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Suppress Keys","name":"suppress-keys","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]}]},"frontmatter":{"title":"Keyboard Interaction","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"navigation","depth":2,"value":"Navigation"},{"id":"groups","depth":2,"value":"Groups"},{"id":"editing","depth":2,"value":"Editing"},{"id":"selection","depth":2,"value":"Selection"},{"id":"suppress-cell-focus","depth":2,"value":"Suppress Cell Focus"},{"id":"header-navigation","depth":2,"value":"Header Navigation"},{"id":"grouped-headers","depth":3,"value":"Grouped Headers"},{"id":"normal-headers","depth":3,"value":"Normal Headers"},{"id":"floating-filters","depth":3,"value":"Floating Filters"},{"id":"example","depth":2,"value":"Example"},{"id":"custom-navigation","depth":2,"value":"Custom Navigation"},{"id":"navigatetonextcell","depth":3,"value":"navigateToNextCell"},{"id":"tabtonextcell","depth":3,"value":"tabToNextCell"},{"id":"cellposition","depth":3,"value":"CellPosition"},{"id":"navigatetonextheader","depth":3,"value":"navigateToNextHeader"},{"id":"tabtonextheader","depth":3,"value":"tabToNextHeader"},{"id":"headerposition","depth":3,"value":"HeaderPosition"},{"id":"example-custom-cell-navigation","depth":2,"value":"Example Custom Cell Navigation"},{"id":"custom-master-detail-navigation","depth":2,"value":"Custom Master Detail Navigation"},{"id":"tabbing-into-the-grid","depth":2,"value":"Tabbing into the Grid"},{"id":"example-tabbing-into-the-grid","depth":3,"value":"Example: Tabbing into the Grid"},{"id":"keyboard-events","depth":2,"value":"Keyboard Events"},{"id":"suppress-keyboard-events","depth":2,"value":"Suppress Keyboard Events"},{"id":"suppressheaderkeyboardevent","depth":3,"value":"suppressHeaderKeyboardEvent"},{"id":"suppresskeyboardevent","depth":3,"value":"suppressKeyboardEvent"},{"id":"example-suppress-keyboard-navigation","depth":3,"value":"Example: Suppress Keyboard Navigation"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/keyboard-navigation","pageName":"keyboard-navigation"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}