Placeholder Text on Multi Select Fields Using DataMap in JavaScript

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. Apply Placeholder in the DataMap Editor.
3. Show placeholder text in the grid cell when the grid is not in edit mode.
4. Show Placeholder in Display 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

This initializes the grid and assigns a DataMap to a column so keys are mapped to friendly values and a drop-down editor is provided automatically.

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

import * as wjcGrid from '@mescius/wijmo.grid';

const countryMap = new wjcGrid.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 grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  columns: [
    { header: 'Country', binding: 'country', dataMap: countryMap, width: 180 },
    { header: 'Downloads', binding: 'downloads', format: 'n0', width: '*' },
    { header: 'Sales', binding: 'sales', format: 'n0', width: '*' },
    { header: 'Expenses', binding: 'expenses', format: 'n0', width: '*' }
  ]
});

• The DataMap converts stored keys into user-friendly values.
• The column automatically gets a drop-down editor.

Apply Placeholder in the DataMap Editor

When a cell enters edit mode, we access the active editor and apply a placeholder attribute so users see guiding text before selecting a value.

grid.prepareCellForEdit.addHandler(function (s, e) {
  const editor = s.activeEditor;
  const col = s.columns[e.col];

  if (editor && col.binding === 'country') {
    editor.setAttribute('placeholder', 'Place holder text');
  }
});

• prepareCellForEdit fires when editing begins.
• If the edited column is the DataMap column (country), 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 does not display placeholder text outside edit mode automatically. We use the formatItem event to detect empty values and inject placeholder text into the cell display.

grid.formatItem.addHandler(function (s, e) {
  if (e.panel === s.cells) {
    const col = s.columns[e.col];

    if (col.binding === 'country' && !s.editRange) {
      const item = s.rows[e.row].dataItem;

      if (item && !item[col.binding]) {
        e.cell.innerHTML =
          '<span class="wj-placeholder">Place holder text</span>';
      }
    }
  }
});

• !s.editRange ensures we apply placeholder logic only when not editing.
• If the value is empty (''), we insert a placeholder <span> element.

Show Placeholder in Display Mode

FlexGrid does not display placeholder text outside edit mode automatically. We use the formatItem event to detect empty values and inject placeholder text into the cell display.

grid.formatItem.addHandler(function (s, e) {
  if (e.panel === s.cells) {
    const col = s.columns[e.col];

    if (col.binding === 'country' && !s.editRange) {
      const item = s.rows[e.row].dataItem;

      if (item && !item[col.binding]) {
        e.cell.innerHTML =
          '<span class="wj-placeholder">Place holder text</span>';
      }
    }
  }
});

• !s.editRange ensures we apply placeholder logic only when not editing.
• If the value is empty (''), we insert a placeholder <span> element.

With this JavaScript setup:

• The DataMap drop-down shows placeholder text when entering edit mode on an empty field.
• Empty cells display placeholder text even when not being edited.
• Users can clearly distinguish between an empty value and a selected value.

Happy coding!