
6 Answers, 1 is accepted
I suspect that you are using HorizontalAlign="Right" on some RadGrid objects (e.g. the MasterTableView). Apart from rendering obsolete markup, this property produces unexpected results when used on block-level elements (such as tables) and should be avoided.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Dimo,
I don't have anything right-aligned in the grid. Here's my ASPX code:
<rad:RadGrid ID="dgUserList" runat="server" AllowSorting="True"
AutoGenerateColumns="False" onsortcommand="dgUserList_SortCommand"
onselectedindexchanged="dgUserList_SelectedIndexChanged" Height="170px"
Skin="Default2006" GridLines="None">
<HeaderStyle Height="20px" HorizontalAlign="Left" />
<ClientSettings EnableClientKeyValues="True" EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<ClientEvents OnRowSelected="RowSelected" OnGridCreated="ScrollToSelectedItem" />
</ClientSettings>
<MasterTableView DataKeyNames="Corporate_Staff_Id" GridLines="None">
<Columns>
<rad:GridBoundColumn DataField="Corporate_Staff_Id" UniqueName="Corporate_Staff_Id" Visible="false"></rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Formatted_Name" HeaderText="User" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="240px">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle HorizontalAlign="Left" Width="240px"></ItemStyle>
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Email_Address" HeaderText="Email Address" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="240px">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle HorizontalAlign="Left" Width="240px"></ItemStyle>
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Login_Username" HeaderText="Username" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="160px">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle HorizontalAlign="Left" Width="160px"></ItemStyle>
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="Inactive" HeaderText="Inactive" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="80">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle HorizontalAlign="Left" Width="80px"></ItemStyle>
</rad:GridBoundColumn>
</Columns>
<HeaderStyle Height="20px" />
</MasterTableView>
</rad:RadGrid>
The whole header area is shifted to the right about half the width of the scrollbar. But only when there are 10 or fewer rows.
Also, there is no right-shift in FireFox. In IE, there is no right-shift if I set UseStaticHeaders = False.
Thanks for the RadGrid declaration.
The problem, which I see when I run my test page is caused by the HeaderStyle Height property. It increases the height of the header cells, but there is a background image on the too-right side of the control, which does not expand automatically. Please create a background image, which matches the height of the header cells and set it as a background to the header wrapper like this:
div.GridHeaderDiv_Default2006
{
background: url(....) 0 0 repeat-x;
}
All the best,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

I removed the Header height settings. I added the background image as you suggested, but also needed to add the border-top and border-bottom. With or without border-top and border-bottom, though, the background image is shifted up a couple of pixels (in IE, not Firefox), and because I want a white background for the grid, the shift up is noticeable. Here's what I added to the style sheet for the Default2006 skin:
div.GridHeaderDiv_Default2006
{
background: #f7f7f7 url('Img/GridHeaderBg.gif') 0 0 repeat-x;
border-top: solid 1px #e5e5e5;
border-bottom: solid 1px #bbb;
}
I'm using the skin images as shipped with the grid. No customization on them. I left all image and cell sizing in the skin style sheet as shipped with the grid.
Any suggestions?
Well, for better results you should edit the image and add the borders as well. The best way to achieve all this is to make a screenshot of RadGrid and cut a portion of a header cell. In this way you will make sure that the custom image is properly sized.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

This works better for me:
div.GridHeaderDiv_Default2006
{
text-align: left;
}
Now, regardless of the number of items in the grid, the header bar is shifted entirely to the left as it should be.
Let's consider this particular issue closed