Customizing Enter Key Behavior in FlexGrid in JavaScript

Background:

FlexGrid has built-in keyboard handling for spreadsheet-style workflows. By default, pressing Enter exits edit mode and moves the selection. You can adjust the general Enter behavior with keyActionEnter, such as KeyAction.CycleOut.

If you need conditional behavior, such as keeping a cell in edit mode or preventing Enter navigation for specific rows or values, do not override _KeyboardHandler. It is internal. Instead, create the FlexGrid in JavaScript and attach a keydown listener to the grid’s hostElement.

Steps to Complete:

1. Add a host element for the grid.
2. Import Wijmo Grid and CSS.
3. Create the grid data.
4. Initialize FlexGrid with keyActionEnter.
5. Add custom Enter key handling.

Getting Started:

Add a host element for the grid

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

• This is the DOM element that FlexGrid will use as its host.

Import Wijmo Grid and CSS

import * as wjGrid from '@mescius/wijmo.grid';
import '@mescius/wijmo.styles/wijmo.css';

• The wijmo.grid package provides FlexGrid and KeyAction. The CSS import is required for Wijmo controls to render correctly.

Create the grid data

function getData(count) {
  const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
  const data = [];

  for (let i = 0; i < count; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  return data;
}

• This creates a simple data array for the grid. FlexGrid can bind directly to an array through the itemsSource property.

Initialize FlexGrid with keyActionEnter

const grid = new wjGrid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  keyActionEnter: wjGrid.KeyAction.CycleOut,
  columns: [
    { binding: 'country', header: 'Country' },
    { binding: 'sales', header: 'Sales', format: 'n2' },
    { binding: 'expenses', header: 'Expenses', format: 'n2' }
  ],
  itemsSource: getData(50)
});

• This creates the FlexGrid directly from JavaScript. The keyActionEnter setting defines the grid’s normal Enter key navigation behavior before any custom business logic is applied.

Add custom Enter key handling

grid.addEventListener(
  grid.hostElement,
  'keydown',
  (e) => {
    if (e.key !== 'Enter') {
      return;
    }

    if (grid.editRange) {
      const item = grid.rows[grid.editRange.row].dataItem;

      if (shouldStayInEditMode(item)) {
        e.preventDefault();
        e.stopImmediatePropagation();
      }
    } else {
      const selection = grid.selection;
      const value = grid.getCellData(selection.row, selection.col, true);

      if (shouldPreventEnterNavigation(value)) {
        e.preventDefault();
      }
    }
  },
  true
);

• The final true argument makes the listener run during the capture phase, allowing your code to intercept Enter before FlexGrid completes its default keyboard handling.

function shouldStayInEditMode(item) {
  return item?.country === 'US';
}

function shouldPreventEnterNavigation(value) {
  return value === 'UK';
}

• When the grid is editing, grid.editRange identifies the edited cell.
• Calling preventDefault() and stopImmediatePropagation() keeps Enter from ending edit mode.
• When the grid is not editing, the selected cell value is checked, and Enter navigation is prevented only when your custom condition is met.

With this approach, you can customize Enter key behavior in JavaScript without overriding internal FlexGrid classes. Use the keyActionEnter property for the default navigation pattern, then attach a keydown listener to the grid’s hostElement for conditional business logic. This lets you prevent navigation, keep a cell in edit mode, or allow Enter only when your custom validation passes, without overriding internal APIs such as _KeyboardHandler.

Happy coding!