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

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 Angular applications, you may want the Space key by itself to select or deselect the current row. You can implement this behavior by using the Angular FlexGrid component's selectionChanged event, storing the initialized WjFlexGrid instance, 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 and import the Wijmo Angular Grid packages.
2. Add the Wijmo stylesheet.
3. Create the Angular FlexGrid markup.
4. Create the grid data and selection handlers in the Angular component.
5. Handle the Space key and toggle the row's isSelected property.

Getting Started:

Install and import the Wijmo Angular Grid packages

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

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

Add the Wijmo stylesheet

In styles.css, import the Wijmo CSS file:

@import '@mescius/wijmo.styles/wijmo.css';

• This stylesheet applies the default FlexGrid styles used by the Angular component.

Create the Angular FlexGrid markup

In app.component.html, declare the FlexGrid and its columns:

<wj-flex-grid
  #flex
  class="grid"
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  [selectionMode]="selectionMode"
  (initialized)="initializeGrid(flex)"
  (selectionChanged)="selectionChanged($event)"
>
  <wj-flex-grid-column
    [header]="'ID'"
    [binding]="'id'"
    [width]="70"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Country'"
    [binding]="'country'"
    [width]="'*'"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Sales'"
    [binding]="'sales'"
    [format]="'n0'"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Active'"
    [binding]="'active'"
  ></wj-flex-grid-column>
</wj-flex-grid>

• initialized gives the component access to the underlying WjFlexGrid instance. selectionChanged tracks the active row as the user navigates through the grid. ListBox selection mode is supplied from the component so rows can be selected and deselected.

Create the grid data and selection handlers in the Angular component

In app.component.ts, import the Wijmo Angular grid module and the core grid types:

import { Component, OnDestroy } from '@angular/core';
import { WjFlexGrid, WjGridModule } from '@mescius/wijmo.angular2.grid';
import { CellRangeEventArgs, Row, SelectionMode } from '@mescius/wijmo.grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnDestroy {
  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 }
  ];

  selectionMode = SelectionMode.ListBox;

  private grid: WjFlexGrid | null = null;
  private currentRow: Row | null = null;

  initializeGrid(grid: WjFlexGrid): void {
    this.grid?.hostElement.removeEventListener('keydown', this.onGridKeyDown);
    this.grid = grid;
    this.grid.hostElement.addEventListener('keydown', this.onGridKeyDown);
  }

  selectionChanged(e: CellRangeEventArgs): void {
    this.currentRow = e.row > -1 ? e.getRow() : null;
  }

  ngOnDestroy(): void {
    this.grid?.hostElement.removeEventListener('keydown', this.onGridKeyDown);
  }

  ...

• The selectionChanged handler stores the row associated with the current grid selection.

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

private onGridKeyDown = (e: KeyboardEvent): void => {
    const isSpaceKey = e.code === 'Space' || e.key === ' ';

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

    if (!this.grid || this.grid.activeEditor) {
      return;
    }

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

    if (!row) {
      return;
    }

    e.preventDefault();

    row.isSelected = !row.isSelected;
    this.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. The ngOnDestroy method removes the keyboard listener when the component is destroyed.

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

Happy coding!