Customizing Enter Key Behavior in FlexGrid in Vue

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 Vue 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 use the Vue initialized binding to access the FlexGrid control instance, then attach a keydown listener to the grid’s hostElement.

Steps to Complete:

1. Register the Wijmo Vue Grid components.
2. Create the FlexGrid data source.
3. Render the Vue FlexGrid and configure keyActionEnter.
4. Use the initialized event to access the FlexGrid control.
5. Add custom Enter key handling with business rules.

Getting Started:

Register the Wijmo Vue Grid components

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

const app = createApp(App);

registerGrid(app);

app.mount('#app');

• This registers Wijmo’s Vue Grid components, including wj-flex-grid and wj-flex-grid-column, so they can be used in Vue templates. The Wijmo CSS import is required for the grid to render correctly.

Create the FlexGrid data source

<script setup>
import { CollectionView } from '@mescius/wijmo';

const data = new CollectionView(getData(50));

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;
}
</script>

• This creates a CollectionView for the grid. FlexGrid can bind directly to arrays, but CollectionView is useful when you want Wijmo’s built-in data management behavior for editing, currency, sorting, and other grid operations.

Render the Vue FlexGrid and configure keyActionEnter

<script setup>
import { KeyAction } from '@mescius/wijmo.grid';
</script>

<template>
  <wj-flex-grid
    :itemsSource="data"
    :keyActionEnter="KeyAction.CycleOut"
  >
    <wj-flex-grid-column binding="country" header="Country" />
    <wj-flex-grid-column binding="sales" header="Sales" format="n2" />
    <wj-flex-grid-column binding="expenses" header="Expenses" format="n2" />
  </wj-flex-grid>
</template>

• The itemsSource binding connects the grid to the data source. The keyActionEnter binding sets the grid’s normal Enter key navigation behavior before any conditional custom logic is applied.

Use the initialized event to access the FlexGrid control

<script setup>
function initGrid(grid) {
  // Add custom grid setup here.
}
</script>

<template>
  <wj-flex-grid
    :itemsSource="data"
    :keyActionEnter="KeyAction.CycleOut"
    :initialized="initGrid"
  >
    <wj-flex-grid-column binding="country" header="Country" />
    <wj-flex-grid-column binding="sales" header="Sales" format="n2" />
    <wj-flex-grid-column binding="expenses" header="Expenses" format="n2" />
  </wj-flex-grid>
</template>

• The initialized binding runs after the Vue wrapper creates the underlying FlexGrid control. The grid parameter is the FlexGrid control instance, so you can access APIs such as hostElement, editRange, selection, and addEventListener.

Add custom Enter key handling with business rules

<script setup>
function initGrid(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';
}
</script>

• 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 allows your code to intercept Enter before the grid completes its default keyboard handling.
• When grid.editRange exists, the grid is currently editing a 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 the custom condition is met.

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