Placeholder Text on Multi Select Fields Using DataMap in React

Background:

In many scenarios, you may want certain FlexGrid columns to use a DataMap so that cells display meaningful text values instead of raw keys. In addition, you might want a placeholder text to appear when no value is selected in a multi-select DataMap field. We can achieve this by handling both cell edit and cell display, inserting placeholder text where appropriate.

Steps to Complete:

1. Handle the prepareCellForEdit event of FlexGrid to apply placeholder text in the DataMap editor.
2. Show placeholder text in the grid cell when the grid is not in edit mode.

Getting Started:

If you set a column’s dataMap property to an instance of a DataMap, FlexGrid will use that map to look up display values and provide a drop-down list for editing purposes.

Handle the prepareCellForEdit event of FlexGrid to apply placeholder text in the DataMap editor

When a cell enters edit mode (e.g., a dropdown open), we access the active editor and apply a placeholder attribute to it so that users see guiding text before selecting a value.

import React from 'react';
import { FlexGrid, DataMap } from '@mescius/wijmo.react.grid';

export default function App() {
  const countries = new DataMap([
    { key: 'US', value: 'United States' },
    { key: 'CA', value: 'Canada' },
    { key: 'DE', value: 'Germany' }
  ], 'key', 'value');

  const data = [
    { country: '', downloads: 120, sales: 300, expenses: 150 },
    { country: 'CA', downloads: 200, sales: 400, expenses: 320 }
  ];

  const handlePrepareCellForEdit = (s, e) => {
    const editor = s.activeEditor;
    const col = e.getColumn();
    if (editor && col.binding === 'country') {
      editor.setAttribute('placeholder', 'Place holder text');
    }
  };

  return (
    <FlexGrid
      itemsSource={data}
      dataMap={{ country: countries }}
      prepareCellForEdit={handlePrepareCellForEdit}
    >
      <FlexGrid.Column
        header="Country"
        binding="country"
        width={180}
      />
      <FlexGrid.Column
        header="Downloads"
        binding="downloads"
        width="*"
        format="n0"
      />
      <FlexGrid.Column
        header="Sales"
        binding="sales"
        width="*"
        format="n0"
      />
      <FlexGrid.Column
        header="Expenses"
        binding="expenses"
        width="*"
        format="n0"
      />
    </FlexGrid>
  );
}

• The prepareCellForEdit event fires when editing begins.
• We check if the edited column is the multi-select DataMap (e.g., 'country').
• If so, we apply a placeholder attribute to the editor element.

Show placeholder text in the grid cell when the grid is not in edit mode

FlexGrid won’t show placeholder text when a cell is not in edit mode unless you inject it manually. The formatItem event runs whenever a cell is rendered; we use it to check for empty DataMap values and insert placeholder text.

const handleFormatItem = (s, e) => {
  const col = e.getColumn();
  if (col.binding === 'country' && !s.editRange) {
    const item = e.getRow().dataItem;
    if (item && !item[col.binding]) {
      e.cell.innerHTML =
        '<span class="wj-placeholder">Place holder text</span>' +
        e.cell.innerHTML;
    }
  }
};

• !s.editRange ensures we apply this only when the cell is not in edit mode.
• If the underlying data item has no value (''), we insert placeholder text before the cell’s content.

With this React setup:

• FlexGrid’s DataMap drop-down shows a placeholder message when a user enters edit mode on an empty field.
• When not editing, empty cells display the placeholder text visually.

Happy coding!