Customizing Enter Key Behavior in FlexGrid in React

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 after the React FlexGrid component has initialized.

Steps to Complete:

1. Create the FlexGrid data source.
2. Render the Wijmo React FlexGrid.
3. Use the React initialized prop to access the FlexGrid control instance.
4. Add a capturing keydown listener to the grid’s hostElement.
5. Cancel the default Enter behavior when your business condition requires it.

Getting Started:

Create the FlexGrid data source

const data = React.useMemo(() => {
  return new CollectionView(getData(50));
}, []);

• This creates a CollectionView once when the React component mounts. CollectionView gives FlexGrid a Wijmo-aware data source for editing, sorting, and current-item tracking.

Render the Wijmo React FlexGrid

<WjGrid.FlexGrid
  itemsSource={data}
  keyActionEnter={KeyAction.CycleOut}
>
  <WjGrid.FlexGridColumn binding="country" header="Country" />
  <WjGrid.FlexGridColumn binding="sales" header="Sales" format="n2" />
  <WjGrid.FlexGridColumn binding="expenses" header="Expenses" format="n2" />
</WjGrid.FlexGrid>

• This displays the data in a React FlexGrid. The keyActionEnter property defines the grid’s normal Enter key navigation behavior before any custom conditional logic is applied.

Use the React initialized prop to access the FlexGrid control instance

const initGrid = React.useCallback((grid) => {
  // Add custom grid setup here.
}, []);

return (
  <WjGrid.FlexGrid
    itemsSource={data}
    keyActionEnter={KeyAction.CycleOut}
    initialized={initGrid}
  />
);

• The React initialized prop runs after the Wijmo control is created. The grid parameter is the underlying FlexGrid control instance, so you can access APIs such as hostElement, editRange, selection, and addEventListener.

Add a capturing keydown listener to the grid’s hostElement

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

      // Custom Enter key logic goes here.
    },
    true
  );
}, []);

• This listens for Enter key presses on the grid’s host element. The final true argument makes the listener run during the capture phase, which lets your code intercept Enter before the grid completes its default keyboard handling.

Cancel the default Enter behavior when your business condition requires it

const initGrid = React.useCallback((grid) => {
  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
  );
}, []);

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

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

• When grid.editRange exists, the grid is currently editing a cell. In that case, preventDefault() and stopImmediatePropagation() keep Enter from ending edit mode. When the grid is not editing, the selected cell value is checked and Enter navigation is prevented only when the custom condition is met.

With this approach, you can customize Enter key behavior in React 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!