This question is locked. New answers and comments are not allowed.
Gabe Calabria
Top achievements
Rank 1
Rank 1
Gabe Calabria
asked on 20 Nov 2009, 04:17 PM
Is there anyway to have a column header span across three data rows?
Something like the below....
| Column Header Title |
| cell1 | cell2 | cell3 |
Something like the below....
| Column Header Title |
| cell1 | cell2 | cell3 |
1 Answer, 1 is accepted
0
Hello Gabe,
I assume the "Column Header Title" is "Adjustments"?
Unfortunately, the grid currently requires that there is one cell per title - most features are not likely to work if the rendering changes (sorting/filtering the three columns is not a clear concept). You can, however, achieve the same visual effect if you place an additional HTML element on top of the headers - i.e. by overlaying them. In order for this to work the three columns should have a fixed total width - add the following JavaScript to the OnDocumentLoad event in the ScriptRegistrar:
$('<div class="t-header">Adjustments</div>')
.css({
position: "absolute",
top: 0,
right: 0,
width: 100, // width/height should be adjusted according to your scenario
height: 20
})
.appendTo('#AdjustmentsGrid'); // grid name/ID
The approach is a tad "hacky", yet it achieves the effect that you need.
Best wishes,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I assume the "Column Header Title" is "Adjustments"?
Unfortunately, the grid currently requires that there is one cell per title - most features are not likely to work if the rendering changes (sorting/filtering the three columns is not a clear concept). You can, however, achieve the same visual effect if you place an additional HTML element on top of the headers - i.e. by overlaying them. In order for this to work the three columns should have a fixed total width - add the following JavaScript to the OnDocumentLoad event in the ScriptRegistrar:
$('<div class="t-header">Adjustments</div>')
.css({
position: "absolute",
top: 0,
right: 0,
width: 100, // width/height should be adjusted according to your scenario
height: 20
})
.appendTo('#AdjustmentsGrid'); // grid name/ID
The approach is a tad "hacky", yet it achieves the effect that you need.
Best wishes,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.