Andre Joubert
Top achievements
Rank 1
Rank 1
Andre Joubert
asked on 18 Dec 2009, 12:48 AM
I know this gets asked a lot, but I am having the problem where with UseStaticHeaders="true" and AllowScrolling="true" the headers don't line up with the detail columns.
The odd thing is the same control, using the same skin and pretty much the same settings works on another page without a problem. The main difference is that the page that works allows sorting, but even setting this on the problem page doesn't fix the issue.
When I look at the col width (in the colgroup) and the clientWidth of each cell, in the header the clientWidths are 8 pixels more than the col width, which makes sense because there is left and padding of 4px in the skin (it's a custom skin).
But in the details cells the clientWidth is actually one less than the col width, however according to the CSS there should be left and right padding of 4px on these cells as well. How can you have negative padding? In IE Developer Toolbar the css settings appear the same for the header and details cells, but the clientWidth is less for the detail cells.
There is no explicit width set on either grid, and all columns have explicit HeaderStyle-Widths set in pixels, not percentages. TableLayout="Fixed". If I shrink some of the cell widths the details columns shrink and there is white space on the right hand side, however the header still fills the available width, even though there are no width='100%' settings on the grid or any of the parent elements. Setting an explicit width for the grid itself changes the width of the grid, but doesn't do anything to make the columns line up.
Both pages have exactly the same .css files included and no inline style that would override anything, I can't find any reason for the difference.
Anyone have any ideas about something else I can check?
The odd thing is the same control, using the same skin and pretty much the same settings works on another page without a problem. The main difference is that the page that works allows sorting, but even setting this on the problem page doesn't fix the issue.
When I look at the col width (in the colgroup) and the clientWidth of each cell, in the header the clientWidths are 8 pixels more than the col width, which makes sense because there is left and padding of 4px in the skin (it's a custom skin).
But in the details cells the clientWidth is actually one less than the col width, however according to the CSS there should be left and right padding of 4px on these cells as well. How can you have negative padding? In IE Developer Toolbar the css settings appear the same for the header and details cells, but the clientWidth is less for the detail cells.
There is no explicit width set on either grid, and all columns have explicit HeaderStyle-Widths set in pixels, not percentages. TableLayout="Fixed". If I shrink some of the cell widths the details columns shrink and there is white space on the right hand side, however the header still fills the available width, even though there are no width='100%' settings on the grid or any of the parent elements. Setting an explicit width for the grid itself changes the width of the grid, but doesn't do anything to make the columns line up.
Both pages have exactly the same .css files included and no inline style that would override anything, I can't find any reason for the difference.
Anyone have any ideas about something else I can check?
3 Answers, 1 is accepted
0
Hello Andre,
It will be hard to give you specific guidelines without a runnable demo to look at, but in general, you should nullify the cell padding of the table cell, which contains the detail table. Since this table cell does not have a CSS class, you can remove its padding with a global style like this:
.RadGrid td
{
padding: 0px ;
}
Also, the TableLayout of the table views should be Fixed and all the corresponding columns from the master and detail tables should have the same width.
Kind regards,
Dimo
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.
It will be hard to give you specific guidelines without a runnable demo to look at, but in general, you should nullify the cell padding of the table cell, which contains the detail table. Since this table cell does not have a CSS class, you can remove its padding with a global style like this:
.RadGrid td
{
padding: 0px ;
}
Also, the TableLayout of the table views should be Fixed and all the corresponding columns from the master and detail tables should have the same width.
Kind regards,
Dimo
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.
0
Andre Joubert
Top achievements
Rank 1
Rank 1
answered on 22 Dec 2009, 02:11 AM
After many painstaking hours I managed to find the source of the problem.
I started with a blank project and added the grid and poulated it on the client side, as in both the other pages. It worked fine, so I kept adding more and more components from the page with the problem into the new test page. I made sure that all the same CSS files and other components were there. Eventually I got to the point that I couldn't see anything that should have made a difference, but I noticed that the generated source was actually different for the two pages.
The problem was caused by the fact that in one page there was some initial data bound to the grid in the Page Load method, however it was an empty List<>. This caused the grid to NOT render any of the cells when the page is loaded, but to only render them when some actual data is bound on the client side.
When I removed this initial data binding the grid renders an initial row of cells, and each cell has the column width explicitly set in the style attribute. This is what causes the columns to line up with the headers.
So it appears that even though there were COL elements declaring the column widths IE 6 ignores them and makes up its own widths if they are not explicitly set on each TD.
The RadGrid bug is that columns rendered entirely on the client side have different markup than those rendered by the code behind.
This is in version 2008.3.1314.35, I'm not sure if it's fixed in a later build because we don't have any budget to redo all of our skins so we are stuck on this version for the moment.
I started with a blank project and added the grid and poulated it on the client side, as in both the other pages. It worked fine, so I kept adding more and more components from the page with the problem into the new test page. I made sure that all the same CSS files and other components were there. Eventually I got to the point that I couldn't see anything that should have made a difference, but I noticed that the generated source was actually different for the two pages.
The problem was caused by the fact that in one page there was some initial data bound to the grid in the Page Load method, however it was an empty List<>. This caused the grid to NOT render any of the cells when the page is loaded, but to only render them when some actual data is bound on the client side.
When I removed this initial data binding the grid renders an initial row of cells, and each cell has the column width explicitly set in the style attribute. This is what causes the columns to line up with the headers.
So it appears that even though there were COL elements declaring the column widths IE 6 ignores them and makes up its own widths if they are not explicitly set on each TD.
The RadGrid bug is that columns rendered entirely on the client side have different markup than those rendered by the code behind.
This is in version 2008.3.1314.35, I'm not sure if it's fixed in a later build because we don't have any budget to redo all of our skins so we are stuck on this version for the moment.
0
Hi Andre,
Please use the following approach:
<telerik:RadGrid>
<ClientSettings>
<ClientEvents OnDataBound="initalizeDimensions" />
</ClientSettings>
</telerik:RadGrid>
<script type="text/javascript">
function initalizeDimensions(sender, args)
{
$find(sender.get_id())._scrolling._initializeDimensions()
}
</script>
Kind regards,
Dimo
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.
Please use the following approach:
<telerik:RadGrid>
<ClientSettings>
<ClientEvents OnDataBound="initalizeDimensions" />
</ClientSettings>
</telerik:RadGrid>
<script type="text/javascript">
function initalizeDimensions(sender, args)
{
$find(sender.get_id())._scrolling._initializeDimensions()
}
</script>
Kind regards,
Dimo
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.