How to Implement Wordwrap on Jqgrid Which Works on IE7, IE8 and Ff

How to implement wordwrap on jqGrid which works on IE7, IE8 and FF

jqGrid Text/Word Wrapping explains how to do this, using the following CSS:

.ui-jqgrid tr.jqgrow td {
 white-space: normal !important;
 height:auto;
 vertical-align:text-top;
 padding-top:2px;
}

Problem with wrapping jqGrid column headers on IE

Try to use additionally

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

UPDATED: It seems to me, that instead of all this styles it would be better to use one following:

th.ui-th-column div{
    white-space:normal !important;
    height:auto !important;
    padding:2px;
}

It seems work very good in all browsers. See an example here.

UPDATED 2: More information and more demos about the problem you can find in the answer.

jqgrid long text wrapping

In case of the test which you need to display has no blanks or other white-space you can't use the CSS style described here and here.

I would recommend you to use another CSS style:

<style type="text/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
    }
</style>

How you can see from the demo the text "testtesttesttesttesttesttesttesttest" will be displayed as the following:

How can i get jqgrid frozen columns to work with word wrap on

The implementation of frozen columns in jqGrid are based on creating of two additional divs with absolute position over the standard grid. If the height of all column headers and all rows of the grid's body are the same the frozen columns works good, but in case of variable height (usage of height: auto CSS) one have the following results (see the first demo):

The first div, so named fhDiv, which I marked with yellow color contains the copy of the column header (the hDiv) where the last non-frozen columns are removed. In the same way the second div, so named fbDiv, which I marked with red color contains the copy of the grid body (the bDiv) where the last non-frozen columns are removed. You can read here more about the standard grid elements.

In the demo I used character wrapping in the column headers which I described in the answer and the word wrapping described for example here.

The height of every row of the fhDiv or fbDiv will be calculated independent from the height of non-frozen columns. So the height of the rows can be less as required.

It is difficult to suggest perfect solution of the problem, but it seems that I found good enough pragmatical way. The idea is to set the height of every row from the fhDiv and fbDiv explicitly based on the size of the corresponding row in the main dives hDiv and bDiv. So I extended the code of fixPositionsOfFrozenDivs function described in the answer to the following:

var fixPositionsOfFrozenDivs = function () {
        var $rows;
        if (typeof this.grid.fbDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
            $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                if ($(this).hasClass("jqgrow")) {
                    $(this).height(rowHight);
                    rowHightFrozen = $(this).height();
                    if (rowHight !== rowHightFrozen) {
                        $(this).height(rowHight + (rowHight - rowHightFrozen));
                    }
                }
            });
            $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
            $(this.grid.fbDiv).css($(this.grid.bDiv).position());
        }
        if (typeof this.grid.fhDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
            $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                $(this).height(rowHight);
                rowHightFrozen = $(this).height();
                if (rowHight !== rowHightFrozen) {
                    $(this).height(rowHight + (rowHight - rowHightFrozen));
                }
            });
            $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
            $(this.grid.fhDiv).css($(this.grid.hDiv).position());
        }
    };

I called the method inside of resizeStop and loadComplete callbacks. In case of usage of gridResize method one need include additional fixes inside of stop handler.

The full my suggestions you can see on the demo which fixs the results from the first demo to the following:

UPDATED: The answer contains updated version of the demo: this one.

Wrapping text in JQGrid column using JSON data

Here there are some references to old answers about the same subject: the answer, the answer, this one, this one, this one, this one.

How to wrap single column header text into multiple lines in jqgrid

In your example with character wrapping you forgot to use !important after the height: auto setting.

I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.

The new demo with the word wrapping is here. the code is the following:

var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;

grid.jqGrid({
    ...
});

// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
    .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
    'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
    this.style.cssText = resizeSpanHeight;
});

// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
    var ts = $(this);
    ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});

It use the following CSS

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

and produce the following picture

(I included <br/> after every character in the first column to make the text "Inv No" by placed on many rows).

Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):

You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div to the following

th.ui-th-column div {
    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 !important;
    vertical-align: middle;
}

we will receive the following results (see the demo here)

By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as

So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/> inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.

How to wrap jqGrid content?

First of all nltobr can be used in the server code and not inside of JavaScript callback method loadComplete will will be executed after filling the grid. Seconds the callback loadComplete will be called after the grid content will be placed in the grid. If you want make some modification of resultSet data you should do this before the grid with the data are created.

You wrote about wrapping of content, but the usage of nltobr and the text example which you posted shows that you have just new line character \n inside of the text. It it is

The demo uses the text which you posted and contains \n inside of the text. The results looks like you want

If you really need wrapping of the text then I recommend you to read the following answers: this one, this one and this one.

UPDATED: If you need make bold the first line of multiline content of some column you can insert <strong> in the text. If you don't use autoencode: true option of jqGrid then you can modify input data before creating jqGrid. For example the demo modifies content of note column:

var i, str, a;

for (i = 0; i < mydata.length; i++) {
    str = mydata[i].note;
    if (typeof str === "string") {
        a = str.split("\n");
        if (a.length > 1) {
            a[0] = "<strong>" + a[0] + "</strong>";
            mydata[i].note = a.join("\n");
        }
    }
}

Another demo demonstrate how to use custom formatter to do the same. You should use the approach if you use autoencode: true option of jqGrid. Th formatter of note column are defined in the demo as

formatter: function (value) {
    var a;
    if (value == null || value === "") {
        return " ";
    } else if (typeof value === "string") {
        a = value.split("\n");
        if (a.length > 1) {
            a[0] = "<strong>" + a[0] + "</strong>";
            return a.join("\n");
        } else {
            return $.jgrid.htmlEncode(value);
        }
    } else {
        return $.jgrid.htmlEncode(value);
    }
}

jqGrid column autosize

There are no "autosize" feature in the jqGrid, but you can use text wrapping in the grid cells (see here) and in the column headers (see here).

jqGrid columns do not expand to setGridWidth after 1 column hidden in IE8 only

Found a solution from:
IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed

Simplified below for my purpose, added right after I hide the column:

// IE8 Fix, tbody not equal to table width for hidden col
            $('#tblGrid_Subject, td[aria-describedby=tblGrid_Subject]').attr('colSpan', '2');

---

Related Topics