Displaying HTML as Text in FlexGrid Cell Tooltips in Vue

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. Register the Wijmo FlexGrid Vue components.
3. Create sample grid data that contains HTML-like text.
4. Create a Tooltip instance and set isContentHtml to false.
5. Assign the cell value to the tooltip in the FlexGrid formatItem event.
6. Add the FlexGrid markup.

Getting Started

Install the required Wijmo packages

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

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

Register the Wijmo FlexGrid Vue components

import { createApp } from 'vue';
import { registerGrid } from '@mescius/wijmo.vue2.grid';
import '@mescius/wijmo.styles/wijmo.css';

import App from './App.vue';

const app = createApp(App);

registerGrid(app);

app.mount('#app');

• Registering the grid module lets you use Wijmo components such as wj-flex-grid and wj-flex-grid-column in Vue templates.

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

<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { Tooltip } from '@mescius/wijmo';
import { getData } from './data';

const data = ref(getData());

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

let flexGrid = null;
let formatItemHandler = null;

onBeforeUnmount(() => {
  if (flexGrid && formatItemHandler) {
    flexGrid.formatItem.removeHandler(formatItemHandler);
  }

  tooltip.dispose();
});
</script>

• 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

<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { Tooltip } from '@mescius/wijmo';
import { getData } from './data';

const data = ref(getData());

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

let flexGrid = null;
let formatItemHandler = null;

function initializeGrid(flex) {
  flexGrid = flex;

  formatItemHandler = (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) : '');
    }
  };

  flex.formatItem.addHandler(formatItemHandler);
}

onBeforeUnmount(() => {
  if (flexGrid && formatItemHandler) {
    flexGrid.formatItem.removeHandler(formatItemHandler);
  }

  tooltip.dispose();
});
</script>

• 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.

Add the FlexGrid markup

<template>
  <wj-flex-grid
    class="tooltip-grid"
    :itemsSource="data"
    :autoGenerateColumns="false"
    :showSort="true"
    :initialized="initializeGrid"
  >
    <wj-flex-grid-column binding="id" header="ID" :width="70" />
    <wj-flex-grid-column binding="country" header="Country" width="*" />
    <wj-flex-grid-column binding="note" header="Note" width="2*" />
    <wj-flex-grid-column binding="downloads" header="Downloads" format="n0" width="*" />
    <wj-flex-grid-column binding="sales" header="Sales" format="c0" width="*" />
    <wj-flex-grid-column binding="expenses" header="Expenses" format="c0" width="*" />
  </wj-flex-grid>
</template>

• This markup creates the FlexGrid and calls initializeGrid when the control is ready. The initialization function attaches the formatItem handler that assigns tooltip text to each data cell.

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

Happy coding!