Expanding FlexGrid Rows to Show Full Text in JavaScript

Background:

When using Wijmo FlexGrid, some cells may contain long text values that are truncated because rows use a fixed height. In this scenario, users may need a way to expand only the row they are viewing, show the full wrapped text, and then collapse the row again.

FlexGrid does not require the Row Detail plugin for this specific use case. Row Detail is better when you need to show an additional detail panel below a row. For simply showing more text inside the existing cells, a lighter approach is to toggle the row’s wordWrap property and call autoSizeRow for the selected row.

The process involves adding a custom expand/collapse icon to the row header, checking whether the target cell content is overflowing, and resizing the row when the icon is clicked.

Steps to Complete:

1. Install Wijmo packages.
2. Import Wijmo styles.
3. Create a FlexGrid with long text content.
4. Add row header cells with expand/collapse icons.
5. Handle icon clicks and toggle row word wrapping.
6. Auto-size the selected row.

Getting Started:

Install Wijmo packages

Ensure the required Wijmo packages are available in your project.

npm i @mescius/wijmo @mescius/wijmo.styles

• @mescius/wijmo includes the core Wijmo modules, including FlexGrid.
• @mescius/wijmo.styles includes the default Wijmo CSS.

Import Wijmo styles

Import the Wijmo CSS file in your main JavaScript file.

import '@mescius/wijmo.styles/wijmo.css';
import './style.css';

• If this step is missed, the grid and built-in Wijmo glyph icons will not display correctly.

Create a FlexGrid with long text content

This creates the grid and binds it to data that includes a long text field. In this example, the description column contains text that may be too long to fit inside the default row height.

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

import '@mescius/wijmo.styles/wijmo.css';
import './style.css';

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

const data = getData(1000);

const grid = new FlexGrid('#theGrid', {
  itemsSource: data
});

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  const data = [];

  for (let i = 0; i < count; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      description:
        i % 2 === 0
          ? 'This is a long description designed to overflow the cell text. This is a long description designed to overflow the cell text.'
          : 'Description',
      active: i % 4 === 0
    });
  }

  return data;
}

• The important part is the description field. That is the column where the text may be truncated and where row expansion becomes useful.

Add row header cells with expand/collapse icons

This customizes the row header cells. The code checks whether the target cell content is overflowing. If the row is collapsed and the text overflows, it shows a plus icon. If the row is expanded, it shows a minus icon.

grid.formatItem.addHandler((s, e) => {
  if (e.panel === s.rowHeaders && e.row >= 0) {
    const row = s.rows[e.row];

    e.cell.innerHTML = '';

    if (shouldShowExpandIcon(s, row)) {
      e.cell.innerHTML = '<span class="row-btn wj-glyph-plus" title="Expand row"></span>';
    } else if (shouldShowCollapseIcon(s, row)) {
      e.cell.innerHTML = '<span class="row-btn wj-glyph-minus" title="Collapse row"></span>';
    }
  }
});

function shouldShowExpandIcon(grid, row) {
  return isOverflow(grid, row) && row.renderHeight <= grid.rows.defaultSize;
}

function shouldShowCollapseIcon(grid, row) {
  return row.renderHeight > grid.rows.defaultSize;
}

function isOverflow(grid, row) {
  const targetCols = ['description'];

  for (let i = 0; i < targetCols.length; i++) {
    const col = grid.getColumn(targetCols[i]);

    if (col) {
      const cell = grid.cells.getCellElement(row.index, col.index);

      if (cell && cell.scrollWidth > cell.clientWidth) {
        return true;
      }
    }
  }

  return false;
}

Handle icon clicks and toggle row word wrapping

This step listens for clicks inside the grid. When the user clicks the plus or minus icon in the row header, the code finds the clicked row and toggles its wordWrap property.

import { hasClass } from '@mescius/wijmo';

grid.rows.defaultSize = 26;

grid.addEventListener(grid.hostElement, 'click', (e) => {
  const ht = grid.hitTest(e);
  const target = e.target;

  if (hasClass(target, 'row-btn') && ht.panel === grid.rowHeaders) {
    const row = grid.rows[ht.row];

    row.wordWrap = row.renderHeight <= grid.rows.defaultSize;
  }
});

• If the row is currently collapsed, wordWrap becomes true. If the row is already expanded, wordWrap becomes false.

Auto-size the selected row

Toggling wordWrap alone is not enough. The row also needs to be resized so the wrapped text can actually appear. This is where autoSizeRow comes in.

grid.addEventListener(grid.hostElement, 'click', (e) => {
  const ht = grid.hitTest(e);
  const target = e.target;

  if (hasClass(target, 'row-btn') && ht.panel === grid.rowHeaders) {
    const row = grid.rows[ht.row];

    row.wordWrap = row.renderHeight <= grid.rows.defaultSize;

    // Resize only the clicked row.
    grid.autoSizeRow(row.index);
  }
});

• This keeps the implementation efficient. Do not auto-size every row when the user clicks one icon. That is wasteful, especially with large grids. Resize only the selected row.

With this JavaScript setup:

• Long text rows show an expand icon in the row header.
• Clicking the icon enables wrapping and auto-sizes that specific row.
• Clicking again disables wrapping and collapses the row.
• Rows without overflowing text do not show an icon.
• The implementation avoids unnecessary row detail panels.

Happy coding!