Allow Column Headers to Wordwrap in React

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:

This section should display a list of tasks that will need to be complete to implement the feature outlined in the article (if applicable).

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.

<wjGrid.FlexGridColumn header="List of Countries" binding="country" wordWrap={true}/>

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.

<wjGrid.FlexGrid itemsSource="{this.state.data} initialized={this.initGrid.bind(this)}>

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(grid) {
    this.grid = grid;
    this.grid.autoSizeRow(0, true)
}

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