How to wrap long text in a grid?

Text wrap is a process in which extra text that doesn't fit in a single line is shifted down to one or multiple new lines as required


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.


Wrap for individual cells, rows and columns

css style "white-space" is set to "normal" or "nowrap" to control wrap for individual cells, rows and columns.

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.