Auto Resize FlexGrid Header Rows After Column Resizing in Vue

Background

In Vue, you can make a Wijmo FlexGrid header row automatically grow after a column is resized by enabling wrapping on the column header cells and then calling autoSizeRow(0, true) after the grid renders and after column resizing.

Steps to Complete

1. Register the Wijmo Vue grid components.
2. Add the FlexGrid markup.
3. Add wrapping to the column header cells.
4. Resize the header row after loading and column resizing.

Getting Started

Register the Wijmo Vue grid components

// main.js
import { createApp } from 'vue';
import App from './App.vue';

import '@mescius/wijmo.styles/wijmo.css';
import { registerGrid } from '@mescius/wijmo.vue2.grid';

const app = createApp(App);

registerGrid(app);

app.mount('#app');

• This imports the Wijmo stylesheet and registers the Vue grid components, including wj-flex-grid and wj-flex-grid-column.

Add the FlexGrid markup

<wj-flex-grid
  :itemsSource="data"
  :autoGenerateColumns="false"
  :initialized="initializeGrid"
>
  <wj-flex-grid-column binding="id" header="ID" :width="60" />
  <wj-flex-grid-column binding="customerName" header="Customer Name" :width="140" />
  <wj-flex-grid-column
    binding="orderDescription"
    header="Detailed Order Description"
    :width="160"
  />
  <wj-flex-grid-column binding="orderDate" header="Order Date" :width="120" />
</wj-flex-grid>

• This creates the FlexGrid, binds it to the Vue data source, defines the columns, and calls initializeGrid when the grid is ready.

Add wrapping to the column header cells

function initializeGrid(grid) {
  grid.formatItem.addHandler((s, e) => {
    toggleClass(e.cell, 'wj-wrap', e.panel.cellType === CellType.ColumnHeader);
  });
}

• The formatItem handler checks whether the cell belongs to the column header panel. If it does, the wj-wrap class is applied so long header text can wrap.

Resize the header row after loading and column resizing

function initializeGrid(grid) {
  const autoSizeHeaderRow = () => {
    grid.autoSizeRow(0, true);
  };

  grid.formatItem.addHandler((s, e) => {
    toggleClass(e.cell, 'wj-wrap', e.panel.cellType === CellType.ColumnHeader);
  });

  grid.loadedRows.addHandler(autoSizeHeaderRow);
  grid.resizedColumn.addHandler(autoSizeHeaderRow);

  autoSizeHeaderRow();
}

• The loadedRows event sizes the header row when the grid first renders. The resizedColumn event runs after the user resizes a column, so the header row is resized again to fit the wrapped header text.

With this setup, long column headers wrap when a column becomes narrow, and the column header row automatically increases in height after the resize.

Happy coding!