GridNavigation

Properties

Class hierarchy

isGridNavigation: Boolean= truereadonly

Identifies an object as an instance of GridNavigation class, or subclass thereof.

isGridNavigation: Boolean= truereadonlystatic

Identifies an object as an instance of GridNavigation class, or subclass thereof.

Other

cellCSSSelector: Stringreadonly

CSS selector for currently focused cell. Format is "[data-index=index] [data-column-id=columnId]".

focusedCell: GridLocation

Grid GridLocation which encapsulates the currently focused cell. Set to focus a cell or use focusCell.

isActionableLocation: Booleanreadonly

This property is true if an element within a cell is focused.

Functions

focusCell

Navigates to a cell and/or its row (depending on selectionMode)

Parameter	Type	Description
`cellSelector`	GridLocationConfig \| GridLocation	Cell location descriptor
`options`	Object	Modifier options for how to deal with focusing the cell. These are used as the scrollTo options.
`options.scroll`	BryntumScrollOptions \| Boolean	Pass `false` to not scroll the cell into view, or a scroll options object to affect the scroll.

Returns: GridLocation -

A GridLocation object representing the focused location.

isFocused

Checks whether a cell is focused.

Parameter	Type	Description
`cellSelector`	GridLocationConfig \| GridLocation \| String \| Number	Cell selector { id: x, columnId: xx } or row id

Returns: Boolean -

true if cell or row is focused, otherwise false

navigateDown

Navigates to the cell below the currently focused cell

Returns: GridLocation -

Selector for focused row (& cell)

navigateLeft

Select the cell before the currently focused one.

Returns: GridLocation -

Cell selector

navigateRight

Select the cell after the currently focused one.

Returns: GridLocation -

Cell selector

navigateUp

Navigates to the cell above the currently focused cell

Returns: GridLocation -

Selector for focused row (& cell)

onFocusedRowDerender

Called by the RowManager when the row which contains the focus location is derendered.

This keeps focus in a consistent place.

Events

navigate

Triggered when a user navigates to a grid cell

// Adding a listener using the "on" method
gridNavigation.on('navigate', ({ event, eventName, focusedCell, lastFocusedCell, source, type }) => {

});

Parameter	Type	Description
`event`	Event	The UI event which caused navigation.
`eventName`	String	The name of the event
`focusedCell`	GridLocation	The currently focused cell
`lastFocusedCell`	GridLocation	The previously focused cell
`source`	Grid	The grid instance
`type`	String	The type of the event

Event handlers

onNavigate

Called when a user navigates to a grid cell

new GridNavigation({
    onNavigate({ event, eventName, focusedCell, lastFocusedCell, source, type }) {

    }
});

Parameter	Type	Description
`event`	Event	The UI event which caused navigation.
`eventName`	String	The name of the event
`focusedCell`	GridLocation	The currently focused cell
`lastFocusedCell`	GridLocation	The previously focused cell
`source`	Grid	The grid instance
`type`	String	The type of the event