Headers and Items don't line up

[Jon]

Hi..
Can you please tell me what I'm doing wrong - I can't get the header to line up with the column data.. thanks again!

<telerik:RadGrid ID="RadGridPendingCorrespondence" runat="server"

AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"

Font-Size="Larger" ShowStatusBar="True" Skin="Outlook" GridLines="None"

onitemcommand="RadGridPendingCorrespondence_ItemCommand" Width="970px">

<AlternatingItemStyle BackColor="#80FFFF" />

<

MasterTableView TableLayout="Fixed">

<

RowIndicatorColumn>

<

HeaderStyle Width="20px"></HeaderStyle>

</

RowIndicatorColumn>

<

ExpandCollapseColumn>

<

HeaderStyle Width="20px"></HeaderStyle>

</

ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="CORRESPONDENCEID" Display="False"

HeaderText="Corr ID" UniqueName="column">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FIRSTNAME" HeaderText="Name"

UniqueName="NAME">

<HeaderStyle Width="100px" />

<ItemStyle />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LASTNAME" UniqueName="column6">

<ItemStyle Width="100px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ConstituentTypeID"

HeaderText="Constituent Type" UniqueName="column2">

<ItemStyle />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Subject" HeaderText="Subject"

UniqueName="Subject">

<HeaderStyle Width="125px" />

<ItemStyle Width="125px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description"

HeaderText="Correspondence Type" UniqueName="column4">

<HeaderStyle Width="100px" />

<ItemStyle />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Due Date" HeaderText="Due Date"

UniqueName="column5">

<HeaderStyle Width="75px" />

<ItemStyle />

</telerik:GridBoundColumn>

<telerik:GridButtonColumn FooterText="" DataTextFormatString="Reply E-mail"

UniqueName="EMAIL" HeaderText="Action to Take " CommandName="EMAIL"

DataTextField="ID">

<ItemStyle Width="75px" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn FooterText="" DataTextFormatString="Reply Letter"

UniqueName="LETTER" HeaderText="" CommandName="LETTER"

DataTextField="ID">

<ItemStyle Width="75px" />

</telerik:GridButtonColumn>

</Columns>

[Mike]

Jon,

Try this

...................

</

mastertableview>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />

</clientsettings>

</telerik:RadGrid>

[Mike]

Jon,

Try this

...................

</

mastertableview>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />

</clientsettings>

</telerik:RadGrid>

[Shinu]

Hi Jon,

Can you try setting the same width for header and item and see whether it is comming correctly?

ASPX:

  <HeaderStyle  Width="50px"/>
   <ItemStyle  Width="50px" />

Shinu.

[Mike]

I did and no luck.

[Dimo]

Hello,

When setting column widths, the recommended approach is to set HeaderStyle-Width only. Mike, please try this and copy-paste your complete RadGrid declaration here if you still have issues with the alignment.


Greetings,
Dimo
the Telerik team

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

[Mike]

I did that and still have issues.  It works great, but I have scrolling enabled.  when the scroll bar is not created because there are only a few rows the headers are fine.  However, when there are enough rows to create the scrollbar is when the headers dno't line up.

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

          <MasterTableView DataKeyNames="ID,STATUS_ID,ASSIGNED_TO,COMPANY_NAME,PRIORITY_NUMBER,ROWNUM" EnableColumnsViewState="True" EditMode="EditForms" AllowMultiColumnSorting="True" Width="98%">
                   <Columns>
                       <telerik:GridBoundColumn DataField="ROW1" HeaderText="ROW1" HeaderButtonType="TextButton" HeaderStyle-Width="50" SortExpression="ROW1" />
                       <telerik:GridBoundColumn DataField="ROW2" HeaderText="ROW2" HeaderButtonType="TextButton"  HeaderStyle-Width="150"  ItemStyle-HorizontalAlign="Left" SortExpression="ROW2" />
                       <telerik:GridBoundColumn DataField="ROW3" HeaderText="ROW3" HeaderButtonType="TextButton" HeaderStyle-Width="75" ItemStyle-HorizontalAlign="Left" SortExpression="ROW3" />
                       <telerik:GridBoundColumn DataField="ROW4" HeaderText="ROW4" DataFormatString="{0:MM/dd/yyyy}" HeaderButtonType="TextButton" HeaderStyle-Width="70" SortExpression="ROW4" />
                       <telerik:GridBoundColumn DataField="ROW5" HeaderText="ROW5" HeaderButtonType="TextButton" HeaderStyle-Width="50" SortExpression="ROW5" />
                       <telerik:GridBoundColumn DataField="ROW6" HeaderText="ROW6" HeaderButtonType="TextButton" HeaderStyle-Width="50" SortExpression="ROW6" />
                       <telerik:GridBoundColumn DataField="ROW7" HeaderText="ROW7" HeaderButtonType="TextButton" HeaderStyle-Width="50" SortExpression="ROW7" />
                       <telerik:GridBoundColumn DataField="ROW8" HeaderText="ROW8" HeaderButtonType="TextButton" HeaderStyle-Width="75" ItemStyle-HorizontalAlign="Left" SortExpression="ROW8" />
                       <telerik:GridBoundColumn DataField="ROW9" HeaderText="ROW9" HeaderButtonType="TextButton" HeaderStyle-Width="100" HeaderStyle-Wrap="false" SortExpression="ROW9" />
                       <telerik:GridBoundColumn DataField="ROW10" HeaderText="ROW10" HeaderButtonType="TextButton" HeaderStyle-Width="60" HeaderStyle-Wrap="false" SortExpression="ROW10" />
                       <telerik:GridBoundColumn DataField="ROW11" HeaderText="ROW11" HeaderButtonType="TextButton" HeaderStyle-Width="75" SortExpression="ROW11" />
                       <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderText="Update" HeaderStyle-Width="100" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left">
                           <ItemTemplate>
                               <asp:ImageButton ID="ImageButtonStart" ImageUrl="~/images/Refresh.gif" AlternateText="Start" Width="14" Height="14" Visible="false" runat="server" />
                               <asp:ImageButton ID="ImageButtonComplete" ImageUrl="~/images/Start.gif" AlternateText="Completed" Visible="false" runat="server" />
                               <asp:ImageButton ID="ImageButtonCancel" ImageUrl="~/images/Cancel2.gif" AlternateText="Cancel" Visible="false" runat="server" />
                               <asp:ImageButton ID="ImageButtonComment" ImageUrl="~/images/Comment.gif" AlternateText="Add Comment" Height="13" runat="server" />
                               <asp:ImageButton ID="ImageButtonRequestInfo" ImageUrl="~/images/Email.gif" AlternateText="Request Info" ImageAlign="AbsMiddle" Visible="false" runat="server" />
                           </ItemTemplate>
                       </telerik:GridTemplateColumn>
                   </Columns>
               </MasterTableView>
               <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True" AllowRowHide="True" >
                   <Resizing AllowColumnResize="True" AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
                   <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
                   <Selecting AllowRowSelect="True" />
               </ClientSettings>
        </telerik:RadGrid>

[Dimo]

Hi George,

When creating a custom skin for RadGrid, you have to make sure that:

The sum of left padding and left border width for header cells equals the sum of left padding and left border width for data cells.

(the same applies for right paddings and right border widths)

Here is a KB article, which discusses alignment issues and how to fix them:

http://www.telerik.com/support/kb/article/b454K-mck-b454T-bha-b454c-bha.aspx


Let us know if you need further advice.


Kind regards,
Dimo
the Telerik team

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

[Mike]

They are equal, what is that first column on the left that has no data under it.  There is a column that is blank and it is the first not and I'm defining my own columns, where is this coming from?

[Dimo]

Hello George,

This is the RowIndicatorColumn, which is displayed when you have enabled row resizing. You can hide this column quite easily:

        private void Page_Load(object sender, EventArgs e)
        {
            foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
            {
                if (col.ColumnType == "GridRowIndicatorColumn")
                {
                    col.Display = false;
                }
            }
        }


Regards,
Dimo
the Telerik team

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

[Mike]

That did not remove the column :(

[Dimo]

Hi Mike,

Here is a working example, please compare it with your implementation:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    private void Page_Load(object sender, EventArgs e)
    {
        foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
        {
            if (col.ColumnType == "GridRowIndicatorColumn")
            {
                col.Display = false;
            }
        }
    }

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        string[] cols = { "Column1", "Column2", "Column3", "Column4" };

        foreach (string col in cols)
        {
            dt.Columns.Add(col);
        }

        for (int i = 1; i <= 5; i++)
        {
            dr = dt.NewRow();

            for (int k = 0; k < cols.Length; k++)
            {
                dr[cols[k]] = String.Format("{0}, Row{1}", cols[k], i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }


</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadGrid for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>Row Indicator Column is <strong>not visible</strong>:</p>

<telerik:RadGrid ID="RadGrid1" Skin="Office2007" runat="server" OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Resizing AllowColumnResize="True" AllowRowResize="True" EnableRealTimeResize="True" />
    </ClientSettings>
</telerik:RadGrid>

<p>Row Indicator Column is <strong>visible</strong>:</p>

<telerik:RadGrid ID="RadGrid2" Skin="Office2007" runat="server" OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Resizing AllowColumnResize="True" AllowRowResize="True" EnableRealTimeResize="True" />
    </ClientSettings>
</telerik:RadGrid>

</form>
</body>
</html>

Sincerely yours,
Dimo
the Telerik team

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

[Mike]

The only difference was I had EnableRealTimeResize="False"

[Dimo]

Hi Mike,

I changed the value of EnableRealTimeResize to False, but everything still works as expected. Did you try the test page in my previous message? What version of RadControls for ASP.NET AJAX you are using?

I guess it will be best to open a support ticket and send us a runnable example, so that we can inspect it locally.

Greetings,
Dimo
the Telerik team

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

[Mike2]

Was there ever a resolution to this?  I have the same issue and have tried the things suggested in this post... ??

[Dimo]

Hello Mike,

As you probably see, I was not able to reproduce the problem described above, as the provided information was insufficient.  Please provide a sample runnable page, similar to the one above and I will let you know how to proceed.

Best wishes,
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.

[Mike2]

I think I've resolved the problem.  I discovered that the width of the grid must be equal or greater than the sum of the displayable col widths...  duh!   Increasing the width of the grid seems to have fixed it. 

[Mike2]

It's baaaack....!!  I've lost the alignment between my header cols and the item cols.... my RadGrid width is set to 100%
and the sum of the header.widths = 100%.  There are no item.widths set.  Here is the RadGrid source:

<telerik:RadGrid ID="RadGridMain"
     runat="server"
     AutoGenerateColumns="False"
     DataSourceID="SqlDataSource1"
     AllowAutomaticUpdates="True"
     GridLines="None"
     Width="100%"
     AllowSorting="True"
     BackColor="#C7CDFA"
     Height="500px"
     onitemcommand="RadGridMain_ItemCommand"
     onitemdatabound="RadGridMain_ItemDataBound1" Skin="Web20">
     <MasterTableView CellSpacing="-1" DataKeyNames="job_inv_id"
         DataSourceID="SqlDataSource1">
     <RowIndicatorColumn>
         <%--<HeaderStyle Width="20px"></HeaderStyle>--%>
     </RowIndicatorColumn>
         <CommandItemSettings AddNewRecordText="" />
         <Columns>
         <telerik:GridBoundColumn DataField="job_inv_id" DataType="System.Int32"
         HeaderText="Job Inventory ID" ReadOnly="True" SortExpression="job_inv_id"
         UniqueName="job_inventory_id">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="9%"
                 HorizontalAlign="Left" />
             <ItemStyle Font-Size="Medium" />
         </telerik:GridBoundColumn>
             <telerik:GridBoundColumn DataField="inventory_desc"
                 HeaderText="Inventory Description" ReadOnly="True"
                 SortExpression="inventory_desc" UniqueName="inventory_desc">
                 <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Left"
                     Width="10%" />
                 <ItemStyle Font-Size="Medium" />
             </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="cust_code" HeaderText="Code"
         ReadOnly="True" SortExpression="cust_code" UniqueName="customer_code">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="6%"
                 HorizontalAlign="Left" />
             <ItemStyle Font-Size="Medium" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="cust_desc" HeaderText="Customer"
         ReadOnly="True" SortExpression="cust_desc" UniqueName="customer_desc">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="20%"
                 HorizontalAlign="Left" />
             <ItemStyle Font-Size="Medium" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="job_desc" HeaderText="Job" ReadOnly="True"
         SortExpression="job_desc" UniqueName="job_desc">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="11%"
                 HorizontalAlign="Left" />
             <ItemStyle Font-Size="Medium" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="job_num" DataType="System.Int32"
         HeaderText="Job #" ReadOnly="True" SortExpression="job_num"
         UniqueName="job_number">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="6%"
                 HorizontalAlign="Left" />
             <ItemStyle Font-Size="Medium" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="ship_date" DataType="System.DateTime"
         HeaderText="Ship" ReadOnly="True" SortExpression="ship_date"
         UniqueName="ship_date">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Left"
             VerticalAlign="Middle" Width="9%" />
             <ItemStyle Font-Size="Medium" HorizontalAlign="Left" VerticalAlign="Middle" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="take_date" DataType="System.DateTime"
         HeaderText="Take" ReadOnly="True" SortExpression="take_date"
         UniqueName="take_date">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Left"
             VerticalAlign="Middle" Width="9%" />
             <ItemStyle Font-Size="Medium" HorizontalAlign="Left" VerticalAlign="Middle" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="sku_date" DataType="System.DateTime"
         HeaderText="SKU" ReadOnly="True" SortExpression="sku_date"
         UniqueName="sku_date">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Left"
             VerticalAlign="Middle" Width="9%" />
             <ItemStyle Font-Size="Medium" HorizontalAlign="Left" VerticalAlign="Middle" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="task_cnt" DataType="System.Int32"
         HeaderText="Tasks" ReadOnly="True" SortExpression="task_cnt"
         UniqueName="task_cnt">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Center"
             VerticalAlign="Middle" Width="6%" />
             <ItemStyle Font-Size="Medium" HorizontalAlign="Center" VerticalAlign="Middle" />
         </telerik:GridBoundColumn>
         <telerik:GridTemplateColumn HeaderText="Status" UniqueName="stats">
             <HeaderStyle Font-Bold="True" Font-Size="Medium" HorizontalAlign="Center"
             VerticalAlign="Middle" Width="5%" />
             <ItemStyle Font-Size="Medium" HorizontalAlign="Center"
                 VerticalAlign="Middle"/>
                 <ItemTemplate>
                     <asp:Image ID="Image1" runat="server"
                      ImageUrl="~/images/redlight.gif"/>
                 </ItemTemplate>
         </telerik:GridTemplateColumn>
         <telerik:GridBoundColumn DataField="active_flag" DataType="System.Char"
             HeaderText="active_flag" ReadOnly="True" SortExpression="active_flag"
             UniqueName="active_flag" Display="False" Visible="False">
             <HeaderStyle Font-Bold="False" />
         </telerik:GridBoundColumn>
         <telerik:GridBoundColumn DataField="task_comp" UniqueName="task_comp"
             Visible="False" Display="False">
         </telerik:GridBoundColumn>
             <telerik:GridBoundColumn DataField="job_id" UniqueName="job_id"
                 Visible="False" Display="False">
             </telerik:GridBoundColumn>
             <telerik:GridBoundColumn DataField="task_in_process_flag" UniqueName="tip_flag"
                 Display="False" Visible="False">
             </telerik:GridBoundColumn>
             <telerik:GridBoundColumn DataField="id" UniqueName="col_id" Visible="False"
                 Display="False">
                 <HeaderStyle HorizontalAlign="Left" />
             </telerik:GridBoundColumn>
     </Columns>
 </MasterTableView>
 <ClientSettings
     EnablePostBackOnRowClick="True"
     EnableRowHoverStyle="True">
     <ClientEvents OnRowDblClick="RowDblClick" />
     <Selecting AllowRowSelect="True" />
     <ClientEvents OnRowContextMenu="RowContextMenu" />
     <Scrolling AllowScroll="True" UseStaticHeaders="True" />
     <Resizing AllowColumnResize="true" AllowRowResize="true" EnableRealTimeResize="true"/>
 </ClientSettings>
 </telerik:RadGrid>

[Dimo]

Hello Mike,

Your RadGrid declaration looks OK and the columns are aligned properly (tested in IE7, IE8 and Firefox). Please check for some border or padding styles on the web page, which might be inherited by RadGrid. If you need further assistance, send a complete runnable web page.

Best wishes,
Dimo
the Telerik team

[Mike2]

Thanks Dimo.  I found the problem.  I'm using IE8.  I added the application URL to the Compatibility View Settings and everything magically lined up. 

[Steve]

I had a similar issue resulting from the display of the vertical scroll bar in which the columns would never align correctly.  There was no need for the vertical scroll bar so  I fixed it by changing the client settings to disable scrolling:

<ClientSettings>

<Scrolling AllowScroll="False" UseStaticHeaders="True" />
<ClientSettings>

 

 

 

[TonyG]

Stumbled across this thread while searching on same topic. I strongly disagree with setting compatibility mode on one PC as a solution to an application issue - that just pushes the problem down to the next user. I've seen the vertical scroll trigger this too but I disagree with removing scroll for the same reasons as I disagree with making a client-side configuration change.

I found a one-line code solution and posted it here. HTH

[David M]

Kind of defeats the purpose of using Telerik radgrid entirely.  AllowScroll="False" cancels out UseStaticHeaders="True" and you no longer have static headers.  May as well save the headache and use standard ASP.NET GridViews.