I’m noticing some strange behavior when using the column grouping feature in a particular grid of mine. The column group (which spans the entire grid, it is used more for a header than an actual grouping) does not span all the way across the top of my grid, and the last column header is distorted. This scenario is a little hard to explain so I’ve made a jsfiddle to demonstrate my problem…..
JSFIDDLE:
http://jsfiddle.net/GtGWM/460/
Initialization Code:
$("#testGrid").jqxGrid({
theme: 'energyblue',
height: 203,
width: 665,
rowsheight: 25,
columnsresize: true,
columns: [
{ text: "a", datafield: 'a', hidden: true, columngroup: 'Details' },
{ text: 'b', datafield: 'b', hidden: true, columngroup: 'Details' },
{ text: "c", datafield: "date", columntype: 'datetimeinput', cellsalign: 'right', cellsformat: "ddd - MM-dd-yyyy", width: 150, columngroup: 'Details' },
{ text: "", width: 15, columngroup: 'Details' },
{ text: "d", datafield: "s", width: 40, columngroup: 'Details' },
{ text: "e", datafield: "t", width: 40, columngroup: 'Details' },
{ text: "f", datafield: "d", width: 40, columngroup: 'Details' },
{ text: "", width: 15, columngroup: 'Details' },
{ text: "g", datafield: "t1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80, columngroup: 'Details' },
{ text: "h", datafield: "t2", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80, columngroup: 'Details' },
{ text: "", width: 15, columngroup: 'Details' },
{ text: "i", datafield: "t3", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80, columngroup: 'Details' },
{ text: "j", datafield: "t4", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80, columngroup: 'Details' }
],
columngroups: [
{ text: 'header', align: 'center', name: 'Details' }
]
});