Displaying Static Text Below the FlexGrid Aggregate Footer in Angular

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 make the text appear across all columns, place the text in the first cell of the extra footer row, clear the remaining footer cells, and use CSS so the text can visually spill across the empty cells.

Steps to Complete

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

Getting Started

Install and import the required Wijmo Angular packages

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

In styles.css, import the Wijmo stylesheet:

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

• The wijmo.angular2.grid package provides the Angular FlexGrid component.
• The wijmo.grid package provides core grid classes, including GroupRow.

Create the FlexGrid data

export class AppComponent {
  data = this.getData(100);

  private getData(count: number): any[] {
    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.

Create the Angular FlexGrid markup

<wj-flex-grid
  #flex
  class="custom-grid"
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  (initialized)="initGrid(flex)"
>
  <wj-flex-grid-column
    [header]="'ID'"
    [binding]="'id'"
    [width]="70">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    [header]="'Country'"
    [binding]="'country'">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    [header]="'Date'"
    [binding]="'date'"
    [width]="200"
    [format]="'d'">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    [header]="'Amount'"
    [binding]="'amount'"
    [format]="'c0'"
    [aggregate]="Aggregate.Sum">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    [header]="'Active'"
    [binding]="'active'">
  </wj-flex-grid-column>
</wj-flex-grid>

• The grid binds to the data array.
• The amount column uses Aggregate.Sum, which tells FlexGrid to show the total in the footer.
• The initialized event calls initGrid, where the footer rows are added.

Add an aggregate footer row

export class AppComponent {
  Aggregate = Aggregate;
  data = this.getData(100);

  initGrid(grid: FlexGrid): void {
    grid.columnFooters.rows.push(new GroupRow());
    grid.bottomLeftCells.setCellData(0, 0, 'Σ');
  }

  private getData(count: number): any[] {
    // data generation code
  }
}

• grid.columnFooters.rows.push(new GroupRow()) adds a footer row to the grid.
• Because the amount column has Aggregate.Sum, the total appears in this footer row.
• bottomLeftCells.setCellData(0, 0, 'Σ') displays a sigma symbol in the footer row header area.

Add a second footer row for static text

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

initGrid(grid: FlexGrid): void {
  grid.columnFooters.rows.push(new GroupRow());
  grid.bottomLeftCells.setCellData(0, 0, 'Σ');

  const staticTextRow = new 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;
    }

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

      e.cell.classList.add('static-footer-cell');
    }
  });
}

• The second GroupRow is used only for static footer text.
• The formatItem event checks whether FlexGrid is rendering the footer panel.
• The static text is placed in the first cell of the second footer row.
• The remaining cells in the row are cleared so aggregate values do not appear there.

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 {
  border-right: none;
}

• overflow: visible allows the text from the first footer cell to display over the empty cells to the right.
• z-index: 1 ensures the note appears above the adjacent empty footer cells.
• white-space: pre-line preserves line breaks in the note text.
• Removing the right borders makes the static footer row appear as one continuous row.

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

Happy coding!