9

How to implement wordwrap on jqGrid which works on IE7, IE8 and FF, while also having column-resize work (grid aligns correctly).

Tried to innerwrap content on each td with a div of specific width (based on initial TH width), but colresize will not work on the divs I've inserted. jqGrid calculates the widths of the resized TH and adjacent THs though.

Is there a better solution which will avoid all the JavaScript 'hacks'?

Justin Ethier
  • 131,333
  • 52
  • 229
  • 284
bcm
  • 5,470
  • 10
  • 59
  • 92

3 Answers3

20

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;
}
Justin Ethier
  • 131,333
  • 52
  • 229
  • 284
  • 1
    +1: very good and clear solution. I suggest only to use `title:false` in `ColModel` for all columns to switch off tooltips which are no more needed. One will save a little memory. Moreover usage other `vertical-align` as `text-top` for all cells in the table can be probably also interesting. – Oleg Jun 09 '10 at 15:41
  • eventually removed vertical-align:text-top, as it was causing the underline styling of anchors in columns with overflow hidden content to overflow in IE. (only the underline overflows!) – bcm Jun 30 '10 at 12:21
1

Use this css, this will surely help.

   .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: normal !important; /* 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
    }
Yasser Shaikh
  • 46,934
  • 46
  • 204
  • 281
-1

Deall All,

this can be as below:

 $("#jqxgrid").jqxGrid(

            {
                source: dataAdapter,
                width: 1500,
                autorowheight: true,
                autoheight: true,
                columnsresize: true,
                theme: 'ui-redmond',
SANN3
  • 9,459
  • 6
  • 61
  • 97
user3729495
  • 1