Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/keyboard-navigation/ below:

JavaScript Grid: Keyboard Interaction | AG Grid

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.

Use the arrow keys (← ↑ → ↓) 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 ^ Ctrl+← to move to the start of the line, and ^ Ctrl+→ to move to the end.

If a cell on the first grid row is focused and you press ↑, 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, ⇥ Tab will move the focus horizontally until the last header cell and then move on to the next row.

Use Page Up and Page Down to move the scroll up and down by one page. Use Home and End to go to the first and last rows.

When a header cell is focused, commands like Page Up, Page Down, Home, End, ^ Ctrl+←/→ will not work as they do when a grid cell is focused.

If on a group element, hitting the ↵ Enter key will expand or collapse the group.

Pressing the F2 or ↵ Enter 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.

Pressing ^ Ctrl+↵ Enter keys when selecting a cell range and editing one of the cells, sets the new value of the edited cell to all the editable cells in the selected range

Pressing the ␣ Space key when focusing a cell will select the cell's row, or deselect the row if already selected. If multi-select is enabled, this selection change will not remove any previous selections.

If you want keyboard navigation turned off, there are two properties that need to be turned off.

Set suppressCellFocus=true in the gridOptions, and Grid Cell Focus will be disabled.

Set suppressHeaderFocus=true in the gridOptions, and Grid Header Focus will be disabled.

The grid header supports full keyboard navigation, however the behaviour may differ based on the type of Column Header that is currently focused.

Column Headers can be:

• Moved by pressing ⇧ Shift + ← / →.
• Resized by pressing ⌥ Alt + ← / →.

While navigating Column Groups Headers, if the current Column Group is expandable, pressing ↵ Enter will toggle the expanded state of the group.

Regular Column Headers may have selection checkboxes, sorting functions and menus, so to access all these functions while focusing a Column Header, you can do the following:

• Press ␣ Space to toggle the Column Header checkbox selection.
• Press ↵ Enter to toggle the sorting state of that column.
• Press ⇧ Shift+↵ Enter to toggle multi-sort for that column.
• Press ⌥ Alt+↓ to open the menu for the focused Column Header.
• Press ^ Ctrl+↵ Enter to either open the filter for the focused Column Header (if columnMenu = 'new' - default behaviour) or open the menu for the focused Column Header (if columnMenu = 'legacy').
• When a menu is open, simply press ⎋ Esc to close it and the focus will return to the Column Header.

While navigating the Floating Filter Columns Headers with the keyboard, pressing ← → will move focus from one Column Header to the next. If you wish to navigate within the Floating Filter Cell, press ↵ Enter to focus the first enabled element within the current Floating Filter Cell, and press ⎋ Esc to return focus to the Floating Filter Column Header.

The example below has grouped headers, headers and floating filters to demonstrate the features mentioned above:

Most people will be happy with the default navigation the grid does when you use the arrow keys and the ⇥ Tab key. Some people will want to override this (e.g. you may want the ⇥ Tab key to navigate to the cell below, not the cell to the right). To facilitate this, the grid offers four methods: navigateToNextCell, tabToNextCell, navigateToNextHeader and tabToNextHeader.

Function

Allows overriding the element that will be focused when the grid receives focus from outside elements (tabbing into the grid). Returns: True if this function should override the grid's default behavior, False to allow the grid's default behavior.

Function

Allows overriding the default behaviour for when user hits navigation (arrow) key when a header is focused. Return the next Header position to navigate to or null to stay on current header.

Function

Allows overriding the default behaviour for when user hits Tab key when a header is focused. Return the next header position to navigate to, true to stay on the current header, or false to let the browser handle the tab behaviour.

Function

Allows overriding the default behaviour for when user hits navigation (arrow) key when a cell is focused. Return the next Cell position to navigate to or null to stay on current cell.

Function

Allows overriding the default behaviour for when user hits Tab key when a cell is focused. Return the next cell position to navigate to, true to stay on the current cell, or false to let the browser handle the tab behaviour.

The navigateToNextCell and tabToNextCell are only called while navigating across grid cells, while navigateToNextHeader and tabToNextHeader are only called while navigating across grid headers. If you need to navigate from one container to another, pass rowIndex: -1 in CellPosition or headerRowIndex: -1 in HeaderPosition.

The example below shows how to use navigateToNextCell, tabToNextCell, navigateToNextHeader and tabToNextHeader in practice.

Note the following:

• navigateToNextCell swaps the up and down arrow keys.
• tabToNextCell uses tabbing to go up and down rather than right and left.
• navigateToNextHeader swaps the up and down arrow keys.
• tabToNextHeader uses tabbing to go up and down rather than right and left.
• When a cell in the first grid row is focused, pressing the down arrow will navigate to the header by passing rowIndex: -1.
• When a header cell in the last header row is focused, pressing the up arrow will navigate to the first grid row by passing headerRowIndex: -1.
• Tabbing/Shift tabbing will move the focus until the first header or the last grid row, but focus will not leave the grid.

Master Detail Grids can contain Custom Details that have their own renderer and hence will need to implement its own keyboard navigation. An example of this can be seen in the Custom Details Keyboard Navigation Example.

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.

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:

const myInput = document.getElementById("my-input"); 


myInput.addEventListener("keydown", event => {
    
    if (event.key !== 'Tab') return;

    
    event.preventDefault();

    
    gridApi.ensureIndexVisible(0);

    
    const firstCol = api.getAllDisplayedColumns()[0];
    gridApi.ensureColumnVisible(firstCol);

    
    gridApi.setFocusedCell(0, firstCol);

}, true);

In the following example there are two input box provided to test tabbing into the grid. Notice the following:

• Tabbing out of the input above the grid will focus the first grid header.
• When the first cell is out of view due to either scrolling down (rows) or across (columns), the grid will scroll back to the left to display the first column.
• Tabbing out of the input below the grid with shift pressed will focus the last cell of the grid.
• When the last column is out of view due to horizontal scroll, shift tabbing into the grid will cause the grid to scroll to focus the last cell.

The focusGridInnerElement callback can be used to change the element focused by the grid when receiving focus from outside . Notice the following:

• Tabbing out of the input above the grid will focus the last focused cell if the grid was previously focused and the element is still in the DOM or otherwise the header.
• Shift Tabbing out of the input below the grid will focus the last focused cell if the grid was previously focused and the element is still in the DOM or otherwise the last cell in the bottom row.

It is possible to add custom behaviour to any key event that you want using the grid events cellKeyDown (gets called when a DOM keyDown event fires on a cell).

These keyboard events are monitored by the grid panel, so they will not be fired when the keydown happens inside of a popup editor, as popup elements are rendered in a different DOM tree.

The grid events wrap the DOM events and provides additional information such as row and column details.

The example below shows processing grid cell keyboard events. The following can be noted:

• Each time a cellKeyDown is fired, the details of the event are logged to the console.
• When the user hits S on a row, the row selection is toggled.

It is possible to stop the grid acting on particular events. To do this implement colDef.suppressHeaderKeyboardEvent and/or colDef.suppressKeyboardEvent callback. The callback should return true if the grid should suppress the events, or false to continue as normal.

Function

Suppress the grid taking action for the relevant keyboard event when a header is focused.

Function

default: false

Allows the user to suppress certain keyboard events in the grid cell.

The callback is available as a column callback (set on the column definition). If you want it to apply to all columns then apply to the defaultColDef property.

The example below demonstrates suppressing the following keyboard events:

• On the Athlete column cells only:
  • ↵ Enter will not start or stop editing.
• On the Country column cells only:
  • ↑ ↓ arrow keys are allowed. This is the only column that allows navigation from the grid to the header.
• On all cells (including the cells of the Athlete Column):
  • ^ Ctrl+A will not select all cells into a range.
  • ^ Ctrl+C will not copy to clipboard.
  • ^ Ctrl+V will not paste from clipboard.
  • ^ Ctrl+D will not copy range down.
  • Page Up and Page Down will not get handled by the grid.
  • Home will not focus top left cell.
  • End will not focus bottom right cell.
  • ← ↑ → ↓ Arrow keys will not navigate focused cell.
  • F2 will not start editing.
  • Delete will not start editing.
  • ⌫ Backspace will not start editing.
  • ⎋ Escape will not cancel editing.
  • ␣ Space will not select current row.
  • ⇥ Tab will not be handled by the grid.
• On the Country header only:
  • Navigation is blocked from the left to right using arrows but is allowed using ⇥ Tab.
  • Navigation up and down is allowed. This is the only header that allows navigation from the header to the grid cells.
  • ↵ Enter is blocked. This is the only header that blocks sorting / opening menu via keyboard.
• On all headers (excluding country):
  • Navigation is blocked up and down, but navigation left / right is allowed using arrows and ⇥ Tab.

When using custom Cell Components, the custom Cell Component is responsible for implementing support for keyboard navigation among its focusable elements. This is why by default, focusing a grid cell with a custom Cell Component will focus the entire cell instead of any of the elements inside the custom cell renderer.

Adding support for keyboard navigation and focus requires a custom suppressKeyboardEvent function in grid options. See Suppress Keyboard Events.

An example of this is shown below, enabling keyboard navigation through the custom cell elements when pressing ⇥ Tab and ⇧ Shift+⇥ Tab:

• Click on the top left Natalie Coughlin cell, press the ⇥ Tab key and notice that the button, textbox and link can be tabbed into. At the end of the cell elements, the tab focus moves to the next cell in the next row
• Use ⇧ Shift+⇥ Tab to navigate in the reverse direction

The suppressKeyboardEvent callback is used to capture tab events and determine if the user is tabbing forward or backwards. It also suppresses the default behaviour of moving to the next cell if tabbing within the child elements.

If the focus is at the beginning or the end of the cell children and moving out of the cell, the keyboard event is not suppressed, so focus can move between the children elements. Also, when moving backwards, the focus needs to be manually set while preventing the default behaviour of the keyboard press event.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4