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

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 applications, you may want the Space key by itself to select or deselect the current row. You can implement this behavior in vanilla JavaScript by tracking the current row with the grid's selectionChanged event, toggling the 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. Add the Wijmo JavaScript assets.
2. Create the grid data and initialize FlexGrid.
3. Use ListBox selection mode so rows can be selected and deselected.
4. Track the current row with the selectionChanged event.
5. Handle the Space key and toggle the row's isSelected property.

Getting Started:

Add the Wijmo JavaScript assets

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css"
/>

<div id="theGrid"></div>

<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="app.js"></script>

• The base Wijmo script must be loaded before the FlexGrid script. The CSS file applies the default FlexGrid styles.

Create the grid data and initialize FlexGrid

const data = [
  { id: 1, country: 'United States', sales: 12000, active: true },
  { id: 2, country: 'Canada', sales: 9500, active: false },
  { id: 3, country: 'Japan', sales: 14200, active: true },
  { id: 4, country: 'Germany', sales: 10100, active: false },
  { id: 5, country: 'Brazil', sales: 8700, active: true }
];

const grid = new wijmo.grid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  selectionMode: wijmo.grid.SelectionMode.ListBox,
  columns: [
    { binding: 'id', header: 'ID', width: 70 },
    { binding: 'country', header: 'Country', width: '*' },
    { binding: 'sales', header: 'Sales', format: 'n0' },
    { binding: 'active', header: 'Active' }
  ],
  itemsSource: data
});

Use ListBox selection mode so rows can be selected and deselected

const grid = new wijmo.grid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  selectionMode: wijmo.grid.SelectionMode.ListBox,
...

• ListBox selection mode allows non-contiguous rows to be selected. It also works with the row's isSelected property, which is used to toggle each row's selected state.

Track the current row with the selectionChanged event

let currentRow = null;

grid.selectionChanged.addHandler((s, e) => {
  currentRow = e.row > -1 ? e.getRow() : null;
});

• The selectionChanged event runs whenever the active selection changes. Storing the current row gives the keyboard handler a clear target when the user presses Space.

Handle the Space key and toggle the row's isSelected property

grid.hostElement.addEventListener('keydown', e => {
  const isSpaceKey = e.code === 'Space' || e.key === ' ';

  if (!isSpaceKey || e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) {
    return;
  }

  if (grid.activeEditor) {
    return;
  }

  const row = currentRow || grid.rows[grid.selection.row];

  if (!row) {
    return;
  }

  e.preventDefault();

  row.isSelected = !row.isSelected;
  grid.refresh();
});

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

• The check for grid.activeEditor allows normal editing behavior to continue when a cell is already in edit mode.

Add a simple grid height

#theGrid {
  height: 320px;
}

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

Happy coding!