9

I have the following problem: I need to put on two or more rows header content of a Jqgrid. I saw the example provided by Zac on jqgrid double headers under alternatives, but by changing only the css I get no change on the grid. Is it possible to have a more complete example in order to reproduce the behavior? Thanks Angelo

Community
  • 1
  • 1
Angelinux
  • 177
  • 1
  • 2
  • 10

1 Answers1

23

If I understand you correct you want have multi-line column headers. You can do this with following additional CSS

<style type="text/css" media="screen">
    th.ui-th-column div{
        white-space:normal !important;
        height:auto !important;
        padding:2px;
    }
</style>

After that you will have columns like here enter image description here

In the example the text 'Amount in EUR' was wrapped automatically and in the text from the first header the line break was made explicitly with 'Inv
No'.

In the answer you will see the link to the demo.

UPDATED: In the answer you will find more recent code.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks a lot, oleg for your prompt reply. It works like a charm. Regards, angelinux – Angelinux Feb 07 '11 at 08:04
  • +1 Awesome I was just about to ask this exact question in the hopes that Oleg would answer it ... but he already has. – JK. Mar 06 '11 at 23:37
  • +50 bounty added and will be for Olegs answer. Just have to wait (1 days) before it can be awarded. – JK. Mar 06 '11 at 23:55
  • @Oleg: This "patch" is working very strange with column resizing. You can resize column if you drag only the top 20-30 px of the header cell. – Mikhail Chernykh Mar 10 '11 at 17:05
  • @netme: Thanks. You can use `.ui-jqgrid .ui-jqgrid-resize {height:100% !important;}` additionally to fix the problem. – Oleg Mar 10 '11 at 17:27
  • @Oleg: I added `.ui-jqgrid .ui-jqgrid-resize {height:100% !important;}` style but in column if resized to more rows, dragging in lower part of border still does not work – Andrus Sep 01 '11 at 17:42
  • @Andrus: In [the demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithWordWrappedColumns.htm) from [the answer](http://stackoverflow.com/questions/7246506/how-to-wrap-single-column-header-text-into-multiple-lines-in-jqgrid/7256972#7256972) on your question I used the value *in px* with "!important". It works better as my old suggestion `.ui-jqgrid .ui-jqgrid-resize {height:100% !important;}`. – Oleg Sep 01 '11 at 18:18