Column Wordwrap in JQGrid

Question

Anybody knows on how to wrap column names in JQGrid. Please find my JSON code below

colModel: [ { name: 'RequestID', index: 'CreditRequest.CreditRequestID', width:100, align: 'left' },.....

With reference to the above code if the size of the content exceeds I want it to be wrapped. Any thoughts or comments

Answer 1

Just reference it in your own css file.

.ui-jqgrid tr.jqgrow td {
    height: 50px;
    white-space: normal;
}

As long as your css file is listed in the header after the jqGrid.css file then it will override it.

Answer 2

For what it's worth, here it is for the header row:

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

Answer 3

You need to take a look at the specific classes applied to your jqGrid th column headers. In my case I had the following: ui-th-div-ie ui-jqgrid-sortable

Looking a little further I found that there were two CSS issues:

1. white-space: normal
2. height: 16px

Both these CSS attributes where defined in ui.jqgrid.css. Realising that I had a specific requirement for this grid that I didnt want to have affecting other implementations I came up with the following solution:

$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');

Answer 4

Here is a few steps to enable word wrapping in the cells.

Open up ui.jqgrid.css Search for .ui-jqgrid tr.jqgrow td Change “white-space: pre;” to “white-space: normal;”

For wrap in cell:

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

And for column headers

.ui-jqgrid .ui-jqgrid-htable th div {
        height:auto;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
}

Answer 5

You can set a white-space css property of th tag to normal. Using JQuery that should be:

  $('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');

Answer 6

Use this css

   .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }

Answer 7

you cant just put a <BR/> , while that works on wrapping the line - it doesnt adjust the height properly

Answer 8

This worked with jqGrid 4.4.4

.ui-jqgrid .ui-jqgrid-htable th div
{
    white-space:normal;
    height:auto !important;
}

Answer 9

Well the simplest way to ensure a line break is to put a <BR/> tag in the column name where ever you need a line break. For instance ClientPrimaryName can be written as Client<BR/>PrimaryName, so that it actually renders as:

Client
PrimaryName