Can't find what you're looking for?

Contact us or post in our forums and we'll help you find an answer.

Allow Column Headers to Wordwrap in Angular

Background:

Sometimes you may have text in a column header that takes up more space than is granted by FlexGrid. Fortunately, the grid comes with two properties that will allow for the grid to properly display text within column headers; wordWrap and autoSizeRow.

Steps to Complete:

1. Set the wordWrap property to true

2. Assign a method to the initialized property so that the height can be set when the grid is initialized

3. Call the autoSizeRow so that the row height for the column headers is auto adjusted

Getting Started

Set the wordWrap property to true

First, we'll need to set the wordWrap property to true in the markup. This will allow the column with the property set on it to have text go to the next line if the text is too long for the header.

<wj-flex-grid-column [header]="'List of Countries'" [binding]="'country'" [wordWrap]="true"></wj-flex-grid-column>

Assign a method to the initialized property so that the height can be set when the grid is initialized

Second, we'll need a way to apply changed to the FlexGrid when its created, so we'll use the initialized property to call an event when the grid has been initialized.

Call the autoSizeRow so that the row height for the column headers is auto adjusted

Finally, inside of the method tied to the initialized property, we'll call the autoSizeRow method. We'll pass it the arguments 0 and true, so that it auto sizes the first row in the grid (the column header row).

initGrid(s, e) {
    s.autoSizeRow(0, true);
}

You can find a live sample of this project here: https://stackblitz.com/edit/wijmo-knowledgebase-angular-flexgrid-column-header-wrapping

Get the Latest Version of Wijmo
Download the Free Trial Now