Displaying HTML as Text in FlexGrid Cell Tooltips in React

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. Import the FlexGrid React components and Tooltip class.
3. Create sample grid data that contains HTML-like text.
4. Create a Tooltip instance and set isContentHtml to false.
5. Assign the cell text to the tooltip in the FlexGrid formatItem event.

Getting Started

Install the required Wijmo packages

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

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

Import the FlexGrid React components and Tooltip class

import { useCallback, useEffect, useMemo } from 'react';
import '@mescius/wijmo.styles/wijmo.css';

import { Tooltip } from '@mescius/wijmo';
import { FlexGrid } from '@mescius/wijmo.react.grid';

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

• These imports allow you to render a FlexGrid in React and attach Wijmo tooltips to individual grid cells.

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.

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 text to the tooltip in the FlexGrid formatItem event

export default function App() {
  const data = useMemo(() => getData(), []);

  const tooltip = useMemo(() => {
    const tt = new Tooltip();
    tt.isContentHtml = false;
    return tt;
  }, []);

  useEffect(() => {
    return () => {
      tooltip.dispose();
    };
  }, [tooltip]);

  const formatItem = useCallback((grid, e) => {
    if (e.panel === grid.cells) {
      tooltip.setTooltip(e.cell, e.cell.textContent || '');
    }
  }, [tooltip]);

  return (
    <FlexGrid
      className="tooltip-grid"
      itemsSource={data}
      showSort={true}
      formatItem={formatItem}
    />
  );
}

• The formatItem event runs when FlexGrid renders a cell. The code gets the cell’s text 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!