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

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 Vue applications, you may want the Space key by itself to select or deselect the current row. You can implement this behavior by using the Vue 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 Vue Grid packages.
  2. Register the Wijmo Grid components and import the stylesheet.
  3. Import Vue APIs and Wijmo grid types.
  4. Create the grid data and refs.
  5. Store the initialized grid instance.
  6. Track the current row with selectionChanged.
  7. Handle the Space key and toggle isSelected.
  8. Remove the keyboard listener when the component unmounts.
  9. Render the Vue FlexGrid.

Getting Started:

Install the Wijmo Vue Grid packages

Install the Vue grid wrapper, the core grid package, and the Wijmo stylesheet package.

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

 

Register the Wijmo Grid components and import the stylesheet

Register the grid module once in the Vue application entry file so <wj-flex-grid> and <wj-flex-grid-column> can be used in Vue templates.

import { createApp } from 'vue';
import { registerGrid } from '@mescius/wijmo.vue2.grid';
import '@mescius/wijmo.styles/wijmo.css';
import App from './App.vue';

const app = createApp(App);
registerGrid(app);
app.mount('#app');

 

Import Vue APIs and Wijmo grid types

Use Vue Composition API helpers for state and cleanup. Use core grid types for the FlexGrid instance, selected row, event arguments, and selection mode.

<script setup lang="ts">
import { onBeforeUnmount, ref, shallowRef } from 'vue';
import { CellRangeEventArgs, FlexGrid, Row, SelectionMode } from '@mescius/wijmo.grid';
</script>

 

Create the grid data and refs

Store the data in a Vue ref. Store the grid instance and current row in shallowRef values because these hold external Wijmo objects and do not need deep Vue reactivity.

const data = ref([
  { 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 gridRef = shallowRef<FlexGrid | null>(null);
const currentRowRef = shallowRef<Row | null>(null);

 

Store the initialized grid instance

The initialized event gives access to the underlying FlexGrid control. Store that control in a ref and attach the keyboard listener to the grid host element.

function initializeGrid(grid: FlexGrid): void {
  gridRef.value?.hostElement.removeEventListener('keydown', onGridKeyDown);
  gridRef.value = grid;
  grid.hostElement.addEventListener('keydown', onGridKeyDown);
}

 

Track the current row with selectionChanged

When the active selection changes, store the selected row. This gives the Space key handler a row to select or deselect.

function selectionChanged(_grid: FlexGrid, e: CellRangeEventArgs): void {
  currentRowRef.value = e.row > -1 ? e.getRow() : null;
}

 

Handle the Space key and toggle isSelected

Check for an unmodified Space key, skip the logic when a cell editor is active, toggle the row’s isSelected value, and refresh the grid so the selected state is shown immediately.

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

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

  const grid = gridRef.value;

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

  const row = currentRowRef.value || grid.rows[grid.selection.row];

  if (!row) {
    return;
  }

  e.preventDefault();

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

 

Remove the keyboard listener when the component unmounts

Cleaning up the listener prevents duplicate handlers if the component is removed and mounted again.

onBeforeUnmount(() => {
  gridRef.value?.hostElement.removeEventListener('keydown', onGridKeyDown);
});

 

Render the Vue FlexGrid

Set selectionMode to SelectionMode.ListBox so rows can be selected and deselected. Bind the initialized and selectionChanged events to the handlers created above.

<template>
  <wj-flex-grid
    class="grid"
    :itemsSource="data"
    :autoGenerateColumns="false"
    :selectionMode="SelectionMode.ListBox"
    :initialized="initializeGrid"
    :selectionChanged="selectionChanged"
  >
    <wj-flex-grid-column header="ID" binding="id" :width="70" />
    <wj-flex-grid-column header="Country" binding="country" width="*" />
    <wj-flex-grid-column header="Sales" binding="sales" format="n0" />
    <wj-flex-grid-column header="Active" binding="active" />
  </wj-flex-grid>
</template>

 

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

Happy coding!

Andrew Peterson

Technical Engagement Engineer