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

Copycat

So you want to wrap the column header name? Are you expecting this to change dynamically or do you just have really long names? It may help for you to post more information... – Whelan

Answer 1

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

Copycat

add a line break but still doesn't expand the cell vertically. – Telfer

Answer 2

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.

Zola

Answer 3

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

Closer

Best solution on the page – Piefer

Answer 4

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');

Point

Answer 5

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

Tunicle

Answer 6

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');

Joppa

Hi, This is not working for me. Any other suggestions? I need it very badly. – Copycat

Answer 7

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
    }

Emmyemmye

Answer 8

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

Rohn

Answer 9

This worked with jqGrid 4.4.4

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

Telfer