Wrapping Text lines in JqGrid

Can you get lines of text to wrap in JqGrid? I have had a look round but i can't find anything.

Solution 1:

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;"';
}

Solution 2:

With jQGrid 4.0, a better way to do this is to use cellattr in colmodel like 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

Solution 3:

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;  
}