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

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 2

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 3

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

Answer 4

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 5

This worked with jqGrid 4.4.4

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

Answer 6

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.