How to have jqgrid cell overflow behave like an html table

I have a jqgrid and some of the cells have a good amount of content in them. It seems that jqgrid's default is to have the overflow hidden and to not have the开发者_如何学JAVA text wrap to new lines (if needed). Is there a way to allow jqgrid cells to expand as needed?

You can use the 'classes' Property of colModel, e.g.:

colModel: [
        { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, classes: 'wrappedJqGridCell'},

        .... other columns

        ]

And then have something appropriate in your CSS file:

.wrappedJqGridCell
{
    white-space: normal !important;
    line-height: 200%;
}

This way you can handle the styling centrally yet still apply it on a cell-by-cell basis. And you don't have to be using JQGrid 4 or above, as with the 'cellattr' solution.

Bear in mind if you prefer to use an ellipsis (' ...') rather than wrap, there is a class built-in to the JQGrid CSS, this being 'ui-ellipsis'. This will work in FireFox too (which usually requires a bit more work to get an ellipsis going).

Had the same problem, this isn't answered and came first in google, so here it is:

/* your grid discriminator*/ tr td
{
    white-space: normal;
    height: auto;
}

I also found recommendations of overflow: normal; this isn't even legal css; it's not in W3C's list and FireBug ate it right up.

Hmm.. already tried the obvious solution? Adapt the CSS that comes with jqgrid to allow cells to do this?

with jQGrid v4.0 use cellattr in colmodel

like following

colModel: [
            { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;' } },

            .... other columns

            ]