Header != Column Alignment

[Mike]

In my grid the headers are lining up with the columns below them.  What is even more interesting is when I set....

 GridLines="Both"

If I grab ANY column and move it ever so slightly the columns and headers line up.

Here are my settings. Keep in mind I need to have Grouping, Multiple Sort, Column Resizing, and Scrolling set to TRUE!!

<telerik:RadGrid ID="RadGrid1"
                AllowMultiRowSelection="true"
                 AllowSorting="true"
                 AllowPaging="false"
                 AutoGenerateColumns="False"
                 AlternatingItemStyle-HorizontalAlign="Center"
                 ItemStyle-HorizontalAlign="Center"
                 BackColor="#ffffff"
                 EnableEmbeddedSkins="false"
                 GridLines="Both"
                 GroupingEnabled="true"
                 Height="370px"
                 OnSortCommand="RadGrid1_SortCommand"
                 OnNeedDataSource="RadGrid1_NeedDataSource"
                 OnItemDataBound="RadGrid1_ItemDataBound"
                 OnItemCommand="RadGrid1_ItemCommand"
                 ShowHeader="true"
                 ShowGroupPanel="true"
                 ShowStatusBar="true"
                 Skin="MySkin"
                 Width="99%"
                 runat="server">

<MasterTableView DataKeyNames="ID" AllowMultiColumnSorting="True" Width="100%">
   <Columns>
     <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="50" />
     <telerik:GridBoundColumn SortExpression="ROWNUM" HeaderText="Priority" HeaderButtonType="TextButton" HeaderStyle-Width="50" ItemStyle-Width="50" DataField="ROWNUM" />
     <telerik:GridBoundColumn SortExpression="COMPANY_NAME" HeaderText="Company Name" HeaderButtonType="TextButton"  HeaderStyle-Width="150" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Left" DataField="COMPANY_NAME"  />
 </Columns>
</MasterTableView>

<ClientSettings AllowColumnsReorder="true" AllowDragToGroup="True" ReorderColumnsOnClient="true" AllowRowHide="true">
   <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
   <Resizing  AllowColumnResize="True" AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"></Resizing>
   <Selecting AllowRowSelect="True"></Selecting>
</ClientSettings>

Any help you can give me would be great!

Notice the Skin I made is the exact same as your Hay with just a different header background image everything else is the same in the css.

[Mike]

Ok, I thought that I solved this one by removing the ItemStyle-Width="" but it didn't resolve it [:(] 

[Ikram]

I am also facing teh same problem. Grid headers are not being aligned with the columns. Although I have made the widths of column and headers same using ItemStyle-Width and HeaderStyle-Width. It does rectify the issue to some extent but still header and columns alignment is little off. The table in which headers and filters appear is bigger than the table in which columns appear. I am facing this problem in IE 7. Appears correctly in Firefox.

[Dimo]

Hi Ikram,

If you are using GridLines and/or a custom skin for RadGrid, then refer to:

http://www.telerik.com/support/kb/aspnet-ajax/grid/how-to-align-radgrid-cells-when-using-scrolling-and-gridlines.aspx

Otherwise, please send us your RadGrid declaration.

By the way, it is not recommended to use ItemStyle for Width, please use only HeaderStyle.


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ikram]

Hi Dimo,

Thanks for your quick reply. I did look into the article you described and it gave me some insight and I was also able to solve the problem. Here is some more description of the problem and solution so it might help others. I am using a modified version of Web Blue skin. The only change, I made to the skin was to show the Vertical Grid Lines. 

I changed the following CSS 

.GridRow_WebBlue td

{

border-color:#f0f2f4 #f0f2f4 #e9e9e9;

}

.GridAltRow_WebBlue td

{

border-color:#fff #fff #e9e9e9;

}

to 

.GridRow_WebBlue td

{

border-right:1px solid ;

border-color:#f0f2f4 #69798C #e9e9e9;

}

.GridAltRow_WebBlue td

{

border-right:1px solid ;

border-color:#fff #69798C #fff;

}

and it did serve my purpose, but alignment already went off then I also had to show Vertical lines in the header for which I used GridLines=Vertical, but it showed horrible Grid Lines in the header and right border of the border also got thick. I looked into padding which was described in the article but padding was same, so I modified the CSS to show the lines in Grid Header instead of using GridLines=Vertical. Here is the change I made, just added the last line

.GridHeader_WebBlue,

.ResizeHeader_WebBlue

{

border-top:1px solid #d8dce0;

border-bottom:1px solid #90979e;

padding:6px 3px 5px 2px;

background:#bbc6d2 url('Grid/sprite.gif') 0 0 repeat-x;

text-align:left;

border-right:1px solid #90979e;

}

I do like Telerik Controls, but it would have been much better, if we dint have to play with CSS. Anyways, Thanks though.

One more thing, I am using ItemStyle-Width because my TableLayout is Fixed, otherwise Grid just expands to take the whole of the space on page, which I dont want. I tried to fix this and also looked at some of the posts but that dint work for me, so now I am stuck with Fixed Layout.

Regards,

Ikram

[Dimo]

Hello Ikram,

Thanks for sharing your solution with the community.

As for the playing with CSS - I am afraid one cannot avoid this in all cases when there is a need to customize the appearance of a web control :)


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.