Customizing Enter Key Behavior in FlexGrid in Angular

Background:

FlexGrid provides built-in keyboard handling for common spreadsheet-style workflows. By default, pressing Enter exits edit mode and moves the selection to another cell. You can adjust the general Enter behavior with the keyActionEnter property, such as setting it to KeyAction.CycleOut.

However, some applications need conditional Enter key behavior, such as preventing navigation for specific rows, keeping a cell in edit mode until a business rule passes, or allowing Enter navigation only for certain cell values.

Because _KeyboardHandler is an internal implementation detail, it should not be overridden directly. The supported approach is to attach a keydown listener to the grid’s hostElement and intercept the Enter key before the grid completes its default handling.

Steps to Complete:

1. Configure the FlexGrid and optional keyActionEnter behavior.
2. Use the Angular initialized event to access the FlexGrid instance.
3. Add a capturing keydown listener to the grid’s hostElement.
4. Check whether the grid is editing or navigating.
5. Cancel the default Enter behavior when your business condition requires it.

Getting Started:

Configure the FlexGrid and optional keyActionEnter behavior

First, define the grid data and optionally configure keyActionEnter. The KeyAction.CycleOut setting controls the grid’s normal Enter navigation behavior, while the custom key handler will handle conditional exceptions.

import { Component } from '@angular/core';
import { CollectionView } from '@mescius/wijmo';
import { FlexGrid, KeyAction } from '@mescius/wijmo.grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  data = new CollectionView(this.getData(50));
  keyActionEnter = KeyAction.CycleOut;

  private getData(count: number): any[] {
    const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    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 source and sets keyActionEnter as the default Enter key behavior. The custom logic added in the next steps will only override Enter when specific conditions are met.

Use the Angular initialized event to access the FlexGrid instance

Use the Angular initialized event to pass the FlexGrid instance to a setup method.

<wj-flex-grid
  #grid
  [itemsSource]="data"
  [keyActionEnter]="keyActionEnter"
  (initialized)="initGrid(grid)">
</wj-flex-grid>

• The initialized event is useful when you need to attach behavior that requires direct access to the FlexGrid control instance.

Add a capturing keydown listener to the grid’s hostElement

Add a keydown listener to the grid’s hostElement. Pass true as the fourth argument so the listener runs during the capture phase.

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

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

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

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

• When grid.editRange has a value, the grid is currently editing a cell. Calling preventDefault() and stopImmediatePropagation() prevents Enter from ending edit mode and stops the grid’s internal Enter handling from continuing.
• When the grid is not in edit mode, you can inspect the selected cell and prevent the default Enter navigation for specific values.

Check whether the grid is editing or navigating

Move your custom conditions into helper methods so the Enter handling remains easy to maintain.

private shouldStayInEditMode(item: any): boolean {
  return item?.country === 'US';
}

private shouldPreventEnterNavigation(value: any): boolean {
  return value === 'UK';
}

• In this example, pressing Enter while editing a row where country is "US" keeps the cell in edit mode. Pressing Enter while a cell with the display value "UK" is selected prevents the normal Enter navigation.

Cancel the default Enter behavior when your business condition requires it

If your requirement is specifically to validate the edited value before committing it, you can also use cellEditEnding. Set cancel and stayInEditMode when the value is invalid.

grid.cellEditEnding.addHandler((s, e) => {
  const editor = s.activeEditor;
  const newValue = editor?.value;

  if (newValue === 'Invalid') {
    e.cancel = true;
    e.stayInEditMode = true;
  }
});

• This is useful when your rule depends on the value entered by the user, while the keydown approach is useful when you need to intercept the Enter key before the grid performs its default navigation or edit-ending action.

With this approach, you can customize Enter key behavior without overriding internal FlexGrid classes. Use keyActionEnter for the default navigation pattern, and use a keydown listener on hostElement for conditional business logic.

Happy coding!