Placeholder Text on Multi Select Fields Using DataMap in Vue

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, we access the active editor and apply a placeholder attribute so users see guiding text before selecting a value.

<template>
  <wj-flex-grid
    ref="grid"
    :itemsSource="data"
    :prepareCellForEdit="onPrepareCellForEdit"
    :formatItem="onFormatItem"
  >
    <wj-flex-grid-column
      header="Country"
      binding="country"
      :dataMap="countryMap"
      width="180"
    />
    <wj-flex-grid-column
      header="Downloads"
      binding="downloads"
      format="n0"
      width="*"
    />
    <wj-flex-grid-column
      header="Sales"
      binding="sales"
      format="n0"
      width="*"
    />
    <wj-flex-grid-column
      header="Expenses"
      binding="expenses"
      format="n0"
      width="*"
    />
  </wj-flex-grid>
</template>

<script>
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';
import * as wjcGrid from '@mescius/wijmo.grid';

export default {
  components: { WjFlexGrid, WjFlexGridColumn },

  data() {
    return {
      countryMap: new wjcGrid.DataMap(
        [
          { key: 'US', value: 'United States' },
          { key: 'CA', value: 'Canada' },
          { key: 'DE', value: 'Germany' }
        ],
        'key',
        'value'
      ),
      data: [
        { country: '', downloads: 120, sales: 300, expenses: 150 },
        { country: 'CA', downloads: 200, sales: 400, expenses: 320 }
      ]
    };
  },

  methods: {
    onPrepareCellForEdit(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.

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

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

Optional

Add visual distinction to placeholder text using CSS.

.wj-placeholder {
  color: #999;
  font-style: italic;
}

With this Vue 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!