Wrapping Text lines in JqGrid Wrapping Text lines in JqGrid javascript javascript

Wrapping Text lines in JqGrid


Try the following CSS:

    .ui-jqgrid tr.jqgrow td {        white-space: normal !important;    }

This works for me using jqGrid 3.6.


As N30 pointed out, jqGrid 4.0 now supports a cellattr colModel option which can allow for a finer grain of control over text wrapping. From his example:

cellattr: function (rowId, tv, rawObject, cm, rdata) {     return 'style="white-space: normal;"';}


With jQGrid 4.0, a better way to do this is to use cellattr in colmodellike this:-

colModel: [            { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } },            .... other columns            ]

In this way you can apply wrapping style to individual column and do not have to use !important


I had this issue for the headers and found I needed all this to get it to also fix it in IE. Note this is for the headers, not cells. The problem with this is it probably effects more than you might want(as I'm sure I'll discover later) but you can always refine the css selectors and/or make them reference the specific #tableIdName or some class so that you can opt-in as you please.

.ui-jqgrid .ui-jqgrid-htable th div {overflow: visible !important;height: auto !important;}.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {  white-space: normal !important;  }.ui-jqgrid .ui-th-div-ie{  white-space: normal !important;  }