Auto Resize FlexGrid Header Rows After Column Resizing in Angular

Background

In Angular, you can resize the FlexGrid column header row after a column is resized by combining two pieces of functionality: Add wrapping to the column header cells and call autoSizeRow(0, true) after the grid renders and after a column is resized.

Steps to Complete

1. Bind FlexGrid events in the Angular template.
2. Add wrapping to the column header cells.
3. Resize the header row to fit the wrapped content.

Getting Started

Bind FlexGrid events in the Angular template

<wj-flex-grid
  #grid
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  (formatItem)="formatHeaderCell(grid, $event)"
  (initialized)="autoSizeHeaderRow(grid)"
  (loadedRows)="autoSizeHeaderRow(grid)"
  (resizedColumn)="autoSizeHeaderRow(grid)">

  <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="60"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'customerName'" [header]="'Customer Name'" [width]="140"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'orderDescription'" [header]="'Detailed Order Description'" [width]="160"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'orderDate'" [header]="'Order Date'" [width]="120"></wj-flex-grid-column>
</wj-flex-grid>

• This creates the FlexGrid, defines the columns, and wires the events used to format header cells and resize the header row.

Add wrapping to the column header cells

formatHeaderCell(grid: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs): void {
  if (e.panel.cellType === wjGrid.CellType.ColumnHeader) {
    e.cell.classList.add('wj-wrap');
  }
}

• The formatItem event runs as cells are created. This code checks whether the cell belongs to the column header panel, then adds the wj-wrap class so long header text can wrap.

Resize the header row to fit the wrapped content

autoSizeHeaderRow(grid: wjGrid.FlexGrid): void {
  grid.autoSizeRow(0, true);
}

• This resizes row 0 in the column header panel. Calling this method after initialization, after rows load, and after a column is resized keeps the header row height in sync with the wrapped text.

Combined code

import { Component } from '@angular/core';
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.angular2.grid';
import * as wjGrid from '@mescius/wijmo.grid';

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjFlexGrid, WjFlexGridColumn],
  template: `
    <wj-flex-grid
      #grid
      [itemsSource]="data"
      [autoGenerateColumns]="false"
      (formatItem)="formatHeaderCell(grid, $event)"
      (initialized)="autoSizeHeaderRow(grid)"
      (loadedRows)="autoSizeHeaderRow(grid)"
      (resizedColumn)="autoSizeHeaderRow(grid)">

      <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="60"></wj-flex-grid-column>
      <wj-flex-grid-column [binding]="'customerName'" [header]="'Customer Name'" [width]="140"></wj-flex-grid-column>
      <wj-flex-grid-column [binding]="'orderDescription'" [header]="'Detailed Order Description'" [width]="160"></wj-flex-grid-column>
      <wj-flex-grid-column [binding]="'orderDate'" [header]="'Order Date'" [width]="120"></wj-flex-grid-column>
    </wj-flex-grid>
  `
})
export class AppComponent {
  data = [
    {
      id: 1,
      customerName: 'Contoso Retail',
      orderDescription: 'Replacement scanners for checkout lanes',
      orderDate: '2026-09-17'
    },
    {
      id: 2,
      customerName: 'Northwind Traders',
      orderDescription: 'Display panels for service counters',
      orderDate: '2026-09-18'
    }
  ];

  formatHeaderCell(grid: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs): void {
    if (e.panel.cellType === wjGrid.CellType.ColumnHeader) {
      e.cell.classList.add('wj-wrap');
    }
  }

  autoSizeHeaderRow(grid: wjGrid.FlexGrid): void {
    grid.autoSizeRow(0, true);
  }
}

With this setup, resizing a column causes long column header text to wrap, and the header row automatically grows to fit the wrapped content.

Happy coding!