1

enter image description hereI tried to keep double header in my jqgrid. But I keep getting 

Length of colNames < > colModel!

Code that I tried

 var grid = $("#list"),
                mydata = [
                   {date:"1",aaa:"2007-10-01",bbb:"test",cccc:"note",ddd:"200.00",eee:"10.00",fff:"210.00",ggg:"",hhh:"",proj:"",iii:""},
];

colModel:[
                    {name:'date',index:'date',key: true,width:100,sorttype:"text"},
                    {name:'time',index:'time',key: true,width:100,sorttype:"text"},
....
jQuery("#list").jqGrid('setGroupHeaders', {
     // useColSpanStyle: true, 
      groupHeaders:[
        {startColumnName: 'date',numberOfColumns: 1, titleText: '<em>Price</em>'},
        {startColumnName: 'time',numberOfColumns: 1, titleText: 'Shiping'}
      ] 
    });

I need Date in the first header time in the second header.

Any help ?

sahana
  • 601
  • 5
  • 12
  • 33
  • Could you include the demo which reproduces your current state of development? Could you describe more clear the results which you expect to have with "double header" or to include the picture? – Oleg Dec 29 '15 at 10:39

1 Answers1

1

It looks like you need just create multiline column headers and not grouping of some column headers together. Thus the usage of setGroupHeaders is the wrong way.

What you need to use is wrapping of long column header text (see the answer) or just including <br/> inside of the text of the column header (see another answer). It's important to understand that colNames or label property of colModel contains HTML fragment which will be set in the column header. Thus one can use HTML markup. Depend on the version of jqGrid which you use you could use additional CSS rule

.ui-jqgrid .ui-jqgrid-htable th div { height: auto }
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • works perfect. I have also tried to added that "Question mark button" in the same manner. Is that a correct way to add button to the header? If at all correct how to add event to it ? Can you please guide ? – sahana Dec 29 '15 at 11:58
  • @sahana: there are many ways to add the button to the column header. It's better if you post the demo which reproduce what you implemented currently. You can look at [the answer](http://stackoverflow.com/a/8215019/315935) which provides an example of one possible implementation. – Oleg Dec 29 '15 at 12:14
  • Thanks for the sample. I will try that out. If I don't get it, will come back. Thank you for the help. – sahana Dec 29 '15 at 12:49