Displaying Static Text Below the FlexGrid Aggregate Footer in JavaScript

Background

Wijmo FlexGrid can display aggregate values in the columnFooters panel by adding a GroupRow. You can also add another footer row below the aggregate row to display static text, notes, or disclaimer content.

To show the text across all columns, place the text in the first cell of the extra footer row, clear the remaining cells, and use CSS so the text visually spans the footer area.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Add the FlexGrid host element.
3. Create the FlexGrid data.
4. Initialize the FlexGrid.
5. Add an aggregate footer row.
6. Add a second footer row for static text.
7. Use CSS to display the static text across the footer row.

Getting Started

Install and import the required Wijmo packages

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

import '@mescius/wijmo.styles/wijmo.css';
import './style.css';
import * as wjGrid from '@mescius/wijmo.grid';

• The Wijmo stylesheet provides the default FlexGrid layout and styling.
• The wijmo.grid package provides the FlexGrid and GroupRow classes.

Add the FlexGrid host element

<div id="theGrid" class="custom-grid"></div>

• The JavaScript code will use this element as the host for the FlexGrid.

Create the FlexGrid 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],
      date: new Date(2014, i % 12, i % 28),
      amount: Math.random() * 10000,
      active: i % 4 === 0
    });
  }

  return data;
}

• This creates sample data for the grid.
• The amount field will be used to display a sum in the aggregate footer row.

Initialize the FlexGrid

const grid = new wjGrid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'ID', width: 70, isReadOnly: true },
    { binding: 'country', header: 'Country' },
    { binding: 'date', header: 'Date', width: 200, format: 'd' },
    { binding: 'amount', header: 'Amount', format: 'c0', aggregate: 'Sum' },
    { binding: 'active', header: 'Active' }
  ],
  itemsSource: getData(100)
});

• This creates the FlexGrid and binds it to the generated data.
• The amount column uses aggregate: 'Sum', which tells FlexGrid to calculate a total for that column.

Add an aggregate footer row

grid.columnFooters.rows.push(new wjGrid.GroupRow());
grid.bottomLeftCells.setCellData(0, 0, 'Σ');

• Adding a GroupRow to columnFooters.rows creates the aggregate footer row.
• The sigma symbol is displayed in the footer row header area.

Add a second footer row for static text

const footerNote =
  'This is static footer text that is not tied to a single column.\nUse this row for notes, disclaimers, or additional instructions.';

const staticTextRow = new wjGrid.GroupRow();
staticTextRow.height = 52;

const staticTextRowIndex = grid.columnFooters.rows.length;
grid.columnFooters.rows.push(staticTextRow);

grid.formatItem.addHandler((s, e) => {
  if (e.panel !== s.columnFooters) {
    return;
  }

  e.cell.classList.remove('static-footer-note', 'static-footer-cell');

  if (e.row === staticTextRowIndex) {
    e.cell.classList.add('static-footer-cell');

    if (e.col === 0) {
      e.cell.textContent = footerNote;
      e.cell.classList.add('static-footer-note');
    } else {
      e.cell.textContent = '';
    }
  }
});

• The second GroupRow is added below the aggregate footer row.
• The formatItem event places the static text in the first cell of that row.
• The remaining cells are cleared so aggregate values do not appear in the static text row.

Use CSS to display the static text across the footer row

.custom-grid {
  width: 100%;
  height: 450px;
}

.wj-flexgrid .wj-colfooters .static-footer-note {
  overflow: visible !important;
  z-index: 1 !important;
  white-space: pre-line;
  line-height: 1.4;
}

.wj-flexgrid .wj-colfooters .static-footer-cell:not(:last-child) {
  border-right: none;
}

• overflow: visible allows the text in the first footer cell to display over the empty cells to the right.
• white-space: pre-line preserves the line break in the note.
• Removing the right borders makes the static footer row appear as one continuous note area.

With this setup, the JavaScript FlexGrid displays an aggregate footer row first, followed by a static text footer row that appears across all columns.

Happy coding!