Jqgrid double headers

Question

Is it possible to include two headers in jqgrid. One with colModel and one without colModel?

I also have a problem where when I click on one row the whole grid is highlighted. How can I solve this problem?

CSS code:

.cssclass{ background-color : #EEEEEE; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #0B0B61; border: 0; font-weight: bold; text-align: center; text-indent: 2pt; padding-top: 2px; padding-right: 2px; padding-left: 2px; left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft); position:relative; z-index:10; cursor: default; } 

Jqgrid code:

  $.ajax({ type: "POST", url: 'cfcs/index.cfc?method=getCols', data: "", dataType: "json", success: function(result) { colM = eval("([" + result.COLMODEL + "])"); colN = result.COLNAMES; jQuery("#list").jqGrid({ url:'cfcs/index.cfc?method=getDetails', datatype: 'json', mtype: 'POST', colNames:colN, colModel :colM, height: 'auto', hoverrows: true, width: 1260, shrinkToFit: false, pager: jQuery('#pager'), resizable: false, rowNum: 25, rowList: [25, 50, 100], viewrecords: true, jsonReader: { root: "ROWS", //our data page: "PAGE", //current page total: "TOTAL", //total pages records:"RECORDS", //total records cell: "", id: "0" } //loadComplete: function(data){alert('loaded');}, //loadError: function(xhr,status,error){alert('error');} }) $("#list").setLabel("col1","<br><br>col1","cssclass"); $("#list").setLabel("col2","<br><br>col1","cssClass"); $("#list").jqGrid('navGrid','#pager',{ edit:false, add:false, del:false, search:true, refresh: true, searchtext:"Search", refreshtext: "Refresh", 'cloneToTop':true }); }, error: function(x, e) { alert(x.readyState + " "+ x.status +" "+ e.msg); } }); 

Thanks.

Answer 1

About your second problem. I assume that you are using the same identifier for all grid lines. The line identifier must be unique, then you will not have a problem with descibed.

Of the two headings, I don't quite understand what you mean. You can visually explain what you mean, in other words, or post an image.

Answer 2

You can consider using separate grids for each date range and simply format them so that they are together.

 --------------------------------------------------- | 1/1/2010 | 1/2/2010 | --------------------------------------------------- | grid 1 header | grid 2 header | --------------------------------------------------- 

You can bind the different events for grid1 and grid2 together, so selecting row 10 in grid1 also selects it in grid2.

You can also see demographic demons here in the "Advanced" section and see if there is anything that will work for your data.

---

Alternative

After reading your comments, I think this may be closer to what you want, just change the units for the date range.

 .ui-jqgrid .ui-jqgrid-htable th div { height: auto; padding: 5px 0px; }