How to wrap long text in the cells of grid?

Text wrap is a feature that automatically shifts any text that doesn't fit within the width of a single line down to one or more new lines. This allows longer passages of text to be displayed within a confined space without having to adjust the font size or overall layout of the text. By enabling text wrap, you can ensure that all of your text is visible and easy to read, even if the available space is small. Without text wrap, text would be cut off at the edge of the cell, making it difficult to read and understand.


Wrap for all cells

Grid has global wrap option to wrap text that doesn't fit in a single line. It affects all cells in the grid body.


Wrap for all header cells

Grid has global hwrap option to wrap text that doesn't fit in a single line in header cells. It affects all cells in the grid header.


Wrap for individual cells, rows and columns

The 'white-space' CSS style property can be used to control text wrapping for individual cells, rows, and columns within the grid. By setting the 'white-space' property to 'normal', the text within a cell will wrap to the next line when it reaches the edge of the container, while setting it to 'nowrap' will prevent the text from wrapping and cause it to overflow the container if it is too long.

It's applied differently depending upon initialization or run time

  • It's set during initialization by setting rowData.pq_cellstyle, rowData.pq_rowstyle and column.style properties respectively.
  • It's set during runtime by using grid.Range(...).style or grid.Range(...).toggleStyle methods.

Any wrap property applied to individual entity overrides the global wrap property.

In this example, context menu is used to set wrap of individual cells, rows or columns during run time.

autoRow option value should be kept true to see the effect of wrap property.