Displaying HTML as Text in FlexGrid Cell Tooltips in JavaScript

Background

When using Wijmo FlexGrid with the Tooltip class, you may need to display cell values that contain HTML-like text, such as: abc <123 test text> lmn or <span>Review Required</span>.

By default, Wijmo tooltips treat their content as HTML. Because of this, text inside angle brackets may be interpreted as markup instead of being displayed as plain text. For example, abc <123 test text> lmn may appear in the tooltip as abc lmn.

Steps to Complete

1. Install the required Wijmo packages.
2. Add a host element for the FlexGrid.
3. Create sample grid data that contains HTML-like text.
4. Import Wijmo and create the FlexGrid.
5. Create a Tooltip instance and set isContentHtml to false.
6. Assign the cell value to the tooltip in the FlexGrid formatItem event.

Getting Started

Install the required Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid @mescius/wijmo.styles

• The wijmo.grid package provides the FlexGrid control. The @mescius/wijmo package provides the Tooltip class, and wijmo.styles provides the required Wijmo CSS.

Add a host element for the FlexGrid

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

• The FlexGrid control is initialized against this host element. Wijmo will render the grid inside the div.

Create sample grid data that contains HTML-like text

export function getData() {
  const countries = 'US,Ger<ma>ny,UK,Ja<pa>n,Italy,Greece'.split(',');
  const notes = [
    'abc <123 test text> lmn',
    '<span>Review Required</span>',
    '<strong>High Priority</strong>',
    'Display <all content> as text'
  ];

  const data = [];

  for (let i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      note: notes[i % notes.length],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  return data;
}

• The country and note fields include values with angle brackets so you can confirm that the tooltip displays the original text instead of parsing it as HTML.

Import Wijmo and create the FlexGrid

import '@mescius/wijmo.styles/wijmo.css';
import * as wjGrid from '@mescius/wijmo.grid';
import { Tooltip } from '@mescius/wijmo';

import { getData } from './data';
import './styles.css';

const theGrid = new wjGrid.FlexGrid('#theGrid', {
  itemsSource: getData(),
  autoGenerateColumns: false,
  showSort: true,
  columns: [
    { binding: 'id', header: 'ID', width: 70 },
    { binding: 'country', header: 'Country', width: '*' },
    { binding: 'note', header: 'Note', width: '2*' },
    { binding: 'downloads', header: 'Downloads', format: 'n0', width: '*' },
    { binding: 'sales', header: 'Sales', format: 'c0', width: '*' },
    { binding: 'expenses', header: 'Expenses', format: 'c0', width: '*' }
  ]
});

• This code imports the Wijmo modules, loads the Wijmo stylesheet, and creates a FlexGrid using the sample data.

Create a Tooltip instance and set isContentHtml to false

const tooltip = new Tooltip();
tooltip.isContentHtml = false;

• The isContentHtml property controls whether tooltip content is interpreted as HTML. Setting it to false tells the Tooltip control to display the content as plain text.

Assign the cell value to the tooltip in the FlexGrid formatItem event

theGrid.formatItem.addHandler((grid, e) => {
  if (e.panel === grid.cells) {
    const value = e.panel.getCellData(e.row, e.col, true);
    tooltip.setTooltip(e.cell, value != null ? String(value) : '');
  }
});

• The formatItem event runs when FlexGrid renders a cell. The code gets the formatted cell value and assigns it as the tooltip content.
• Because isContentHtml is set to false, values such as <span>Review Required</span> or abc <123 test text> lmn appear exactly as written in the tooltip.

With this setup, FlexGrid cell tooltips display HTML-like values as plain text instead of interpreting them as markup.

Happy coding!