Placeholder Text on Multi Select Fields Using DataMap in Angular

Background:

In many situations, you may want columns to map values, so cells display a value that is different from what is actually stored in the grid. Additionally, you may want a placeholder in those values.

Steps to Complete:

1. Handle the prepareCellForEdit event of FlexGrid to apply placeholder text

2.  Show the 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, the grid will use it to look up display values for each data item, and will provide a drop-down list with valid items to use when editing the cells.

Handle the prepareCellForEdit event of FlexGrid to apply placeholder text

You can handle the prepareCellForEdit event of FlexGrid to apply placeholder text on the dataMap editor. You can access the editor using the activeEditor property of the FlexGrid inside the prepareCellForEdit event handler.

// app.component.ts

prepareCellForEdit(s: wjGrid.FlexGrid, e: any) {
    let editor = s.activeEditor;
    let col = e.getColumn();
    if (editor && col.binding == 'country') {
      editor.setAttribute('placeholder', 'Place holder text');
    }
  }

Set your dataMap to the desired column and data.

<!-- app.component.html -->

<wj-flex-grid #grid [itemsSource]="data" (prepareCellForEdit)="prepareCellForEdit(grid, $event)" (formatItem)="formatItem(grid, $event)">
  <wj-flex-grid-column
    [header]="'Country'"
    [binding]="'country'"
    [width]="180"
    [isRequired]="false"
    [dataMap]="countries"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Downloads'"
    [binding]="'downloads'"
    width="*"
    format="n0"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Sales'"
    [binding]="'sales'"
    width="*"
    format="n0"
  ></wj-flex-grid-column>
  <wj-flex-grid-column
    [header]="'Expenses'"
    [binding]="'expenses'"
    width="*"
    format="n0"
  ></wj-flex-grid-column>
</wj-flex-grid>

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

// app.component.ts

formatItem(s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) {
    let col = e.getColumn();
    if (col.binding == 'country' && !s.editRange) {
      let item = e.getRow().dataItem;
      if (item && !item[col.binding]) {
        // added style through CSS in style.css file
        e.cell.innerHTML =
          '<span class="wj-placeholder">Place holder text</span>' +
          e.cell.innerHTML;
      }
    }
  }