Using the Space Key to Select or Deselect a FlexGrid Row in React

Background:

Wijmo FlexGrid includes built-in keyboard support. By default, the Space key starts editing, toggles a checkbox cell, or expands and collapses group rows, while Shift + Space selects a row.

In some React applications, you may want the Space key by itself to select or deselect the current row. You can implement this behavior by using the React FlexGrid component's selectionChanged event, storing the initialized FlexGrid control instance in a ref, toggling the current row's isSelected property when Space is pressed, and calling the grid's refresh method so the visual selection state is updated immediately.

Steps to Complete:

1. Install the Wijmo React Grid packages.
2. Import React hooks, Wijmo components, grid types, and styles.
3. Create the data and refs.
4. Store the initialized grid instance.
5. Track the current row with selectionChanged.
6. Handle Space and toggle isSelected.
7. Clean up the listener on unmount.
8. Render the React FlexGrid.

Getting Started:

Install the Wijmo React Grid packages

npm install @mescius/wijmo.react.grid @mescius/wijmo.grid @mescius/wijmo.styles

• The wijmo.react.grid package provides the React FlexGrid component. The wijmo.grid package provides core grid types such as FlexGrid, SelectionMode, Row, and CellRangeEventArgs.

Import React hooks, Wijmo components, grid types, and styles

import { useCallback, useEffect, useRef, useState } from 'react';
import * as wjcGrid from '@mescius/wijmo.react.grid';
import { CellRangeEventArgs, FlexGrid, Row, SelectionMode } from '@mescius/wijmo.grid';
import '@mescius/wijmo.styles/wijmo.css';
import './App.css';

Create the data and refs

Use refs for the grid and current row so event handlers can access them without re-rendering.

const [data] = useState([
  { id: 1, country: 'United States', sales: 12000, active: true },
  { id: 2, country: 'Canada', sales: 9500, active: false }
]);

const gridRef = useRef<FlexGrid | null>(null);
const currentRowRef = useRef<Row | null>(null);

Store the initialized grid instance

const initializeGrid = useCallback((grid: FlexGrid): void => {
  gridRef.current?.hostElement.removeEventListener('keydown', onGridKeyDown);
  gridRef.current = grid;
  grid.hostElement.addEventListener('keydown', onGridKeyDown);
}, [onGridKeyDown]);

Track the current row with selectionChanged

const selectionChanged = useCallback((_grid: FlexGrid, e: CellRangeEventArgs): void => {
  currentRowRef.current = e.row > -1 ? e.getRow() : null;
}, []);

• The selectionChanged handler stores the row associated with the current grid selection in a React ref.

Handle Space and toggle isSelected

const onGridKeyDown = useCallback((e: KeyboardEvent): void => {
  const isSpaceKey = e.code === 'Space' || e.key === ' ';
  if (!isSpaceKey || e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return;

  const grid = gridRef.current;
  if (!grid || grid.activeEditor) return;

  const row = currentRowRef.current || grid.rows[grid.selection.row];
  if (!row) return;

  e.preventDefault();
  row.isSelected = !row.isSelected;
  grid.refresh();
}, []);

• The keyboard handler checks for an unmodified Space key, prevents the default Space behavior, toggles row.isSelected, and calls refresh() so the row's selected appearance is updated.

Clean up the listener on unmount

useEffect(() => {
  return () => {
    gridRef.current?.hostElement.removeEventListener('keydown', onGridKeyDown);
  };
}, [onGridKeyDown]);

• The useEffect cleanup removes the keyboard listener when the React component is unmounted.

Render the React FlexGrid

<wjcGrid.FlexGrid
  className="grid"
  itemsSource={data}
  autoGenerateColumns={false}
  selectionMode={SelectionMode.ListBox}
  initialized={initializeGrid}
  selectionChanged={selectionChanged}
>
  <wjcGrid.FlexGridColumn header="ID" binding="id" width={70} />
  <wjcGrid.FlexGridColumn header="Country" binding="country" width="*" />
  <wjcGrid.FlexGridColumn header="Sales" binding="sales" format="n0" />
  <wjcGrid.FlexGridColumn header="Active" binding="active" />
</wjcGrid.FlexGrid>

• initialized gives the component access to the underlying FlexGrid control instance.
• selectionChanged tracks the active row as the user navigates through the grid.
• SelectionMode.ListBox allows rows to be selected and deselected.

With this setup, users can move through the React FlexGrid with the keyboard and press Space to select or deselect the active row.

Happy coding!