Column Wordwrap in JQGrid

Question

Hi, 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 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 2

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 3

Well the simplest way to ensure a line break is to put a

tag in the column name where ever you need a line break. For instance ClientPrimaryName can be written as Client

PrimaryName

Answer 4

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.