Wrapping Text lines in JqGrid

Question

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

Alper

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

Autolycus

Answer 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

Downtrodden

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

Carnelian

Answer 4

You can use the classes colModel option to put a CSS class on your column and then put in your CSS file the style white-space: normal !important; on that class...

classes

string

This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column.

In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.

Musculature