Auto Resize FlexGrid Header Rows After Column Resizing in JavaScript

Background

In FlexGrid, resizing a column can make long column header text wrap onto multiple lines. To make the header row expand automatically, enable wrapping on the column header cells and call autoSizeRow() whenever the user finishes resizing a column.

Steps to Complete

1. Add wrapping to the column header cells.
2. Auto-size the header row when a column is resized.
3. Auto-size the header row on initial load.

Getting Started

Add wrapping to the column header cells

grid.formatItem.addHandler(function (s, e) {
  if (e.panel.cellType === wijmo.grid.CellType.ColumnHeader) {
    wijmo.addClass(e.cell, 'wj-wrap');
  }
});

• This checks whether the formatted cell belongs to the column header panel. If it does, the wj-wrap class is added so the header text can wrap instead of being clipped.

Auto-size the header row when a column is resized

grid.resizedColumn.addHandler(function (s, e) {
  s.autoSizeRow(0, true);
});

• The resizedColumn event runs after the user finishes resizing a column. Calling autoSizeRow(0, true) resizes the first column header row to fit the wrapped header content.

Auto-size the header row on initial load

grid.loadedRows.addHandler(function (s, e) {
  s.autoSizeRow(0, true);
});

• This ensures the header row is sized correctly when the grid first renders, before the user resizes any columns.

Combined example

var grid = new wijmo.grid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'ID', width: 60 },
    { binding: 'customerName', header: 'Customer Name', width: 140 },
    { binding: 'orderDescription', header: 'Detailed Order Description', width: 160 },
    { binding: 'orderDate', header: 'Order Date', width: 120 }
  ],
  itemsSource: data
});

grid.formatItem.addHandler(function (s, e) {
  if (e.panel.cellType === wijmo.grid.CellType.ColumnHeader) {
    wijmo.addClass(e.cell, 'wj-wrap');
  }
});

grid.loadedRows.addHandler(function (s, e) {
  s.autoSizeRow(0, true);
});

grid.resizedColumn.addHandler(function (s, e) {
  s.autoSizeRow(0, true);
});

With this setup, the column headers wrap when needed, and the header row height updates automatically after a column is resized.