Align GridLines

[Software]

I can't seem to get GridLines to align with the grid header columns.
I've tried a couple of skins (Hay and Office2007), with and w/o the GridLines property set, but the columns still get skewed.

I have table layout: fixed with Scrolling and sorting enabled if that matters.

Thanks,
Eric

[Software]

After further testing, I changed the layout to Auto and it initially aligns the GridLines, but if I resize the grid (by changing GridData's height) the grid becomes mis-aligned again.

Eric

[Dimo]

Hello Eric,

We do not recommend using the GridLines property, because it is an old and obsolete property using non-XHTML markup. Using CSS borders is a lot better. However, if you still want to use GridLines, there are a couple of things to keep in mind and depending on the skin, you may need to add some CSS style to make the headers and data cells align.

Could you please paste your RadGrid declaration here, so that I can give you a more to-the-point advice? Thank you in advance.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shinu]

Hi Eric,

You can also have a look at the following help article.
Modifying existing skins/creating new skins

Shinu.

[Software]

Shouldn't there be something in the documentation about not using GridLines?
Regardless, I'm using the Office2007 skin with the GridLines property not set, and still have the problem.

Here's my grid definition w/o the column info

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
    DataSourceID="SqlDataSource1" Skin="Office2007" Width="100%"
    onitemdatabound="RadGrid1_ItemDataBound" AllowSorting="True">
<MasterTableView datasourceid="SqlDataSource1" tablelayout="Auto" width="100%" >
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn Visible="False" Resizable="False">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>

<EditFormSettings>
<PopUpSettings ScrollBars="None"></PopUpSettings>
</EditFormSettings>
</MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
</telerik:RadGrid>

If I add the grid with the browser not at full size, the lines align properly.  If I then maximize the browser, the lines no longer line up.

[Ed]

I am having the same problem.  Even with GridLines set to None, it is obvious looking at the grid that as you move to the right, the column headers get more and more misaligned from the column data below (column headers are slightly narrower it appears, so cumulatively they creep to the left of the columns below.

Was there ever a solution to this?

I should add - in my case, if I resize a column, then they all are properly aligned until the next postback to the server.  Any time there is a postback, then the grid becomes misaligned again.

-Ed

[Dimo]

Hi all,

The basic rule for having aligned vertical cell borders is:

1) The sum of left padding and left border width of headers cells should be equal to the sum of left padding and left border width of data cells.
2) The same for right paddings and borders.

These points are true for all RadControls for ASP.NET AJAX embedded skins.

In addition, if you are setting column width, it is recommended that you use HeaderStyle-Width only.

Please note that if you use the GridLines property with some skins, you may misalign the columns. This is because the skins, which feature different border styles for headers and cells require some special padding styles, which work only with GridLines="None" (by the way, we don't recommend using GridLines, because they don't look good anyway).

For more information about aligning borders when using GridLines, please refer to:

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


Sincerely yours,
Dimo
the Telerik team

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

[Peter]

I am having similar problems as described in this thread.  In addition to the misalignment, I am also getting "phantom" columns or grid lines in the wrong places.  I am not setting the gridLines property (I was, but removed that after reading this thread.)  I also changed my columns to use only HeaderStyle-Width (I was previously using ItemStyle-Width as well.)  None of the changes suggested in this thread have changed or solved the problem for me.

One strange thing is that, if I resize a column, the alignment of all the displayed columns gets corrected, but if I then scroll horizontally (or post back, as others have noted), the alignment is screwed up again.

Thanks

[Dimo]

Hi Peter,

We will need your RadGrid declaration. Thanks.

Regards,
Dimo
the Telerik team

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

[Peter]

Here is what I currently have for mark-up.  This has changed several times but I still have the alignment and scrolling problems.

 

 

<telerik:RadGrid

 

 

    ID="grdTest"

 

 

    runat="server"

 

 

    AllowPaging="true"

 

 

    AllowSorting="true"

 

 

    AllowAutomaticDeletes="False"

 

 

    AutoGenerateColumns="false"

 

 

    AllowFilteringByColumn="true"

 

 

    onneeddatasource="grdTest_NeedDataSource"

 

 

    Skin=""

 

 

    BorderStyle="Solid"

 

 

    BorderWidth="1px"

 

 

    BorderColor="Black"

 

 

    CellPadding="3"

 

 

    CellSpacing="3"

 

 

    CssClass="RadGrid"

 

 

    Width="640px"

 

 

    onitemdatabound="grdTest_ItemDataBound" >

 

 

 

    <ClientSettings>

 

 

        <Scrolling

 

 

            SaveScrollPosition="true"

 

 

            EnableVirtualScrollPaging="false"

 

 

            AllowScroll="true"

 

 

            FrozenColumnsCount="1"

 

 

            UseStaticHeaders="true" />

 

 

    <Resizing

 

 

        AllowColumnResize="false"

 

 

        AllowRowResize="false"

 

 

        EnableRealTimeResize="false" />

 

 

    </ClientSettings>

 

 

 

    <HeaderContextMenu EnableTheming="True">

 

 

        <CollapseAnimation Type="OutQuint" Duration="200">

 

 

        </CollapseAnimation>

 

 

    </HeaderContextMenu>

 

 

    <MasterTableView

 

 

        CellPadding="3"

 

 

        TableLayout="Auto"

 

 

        AllowMultiColumnSorting="true" >

 

 

        <PagerTemplate>

 

 

            <table border="0" cellpadding="3" width="100%" class="RadGridPager">

 

 

                <tr>

 

 

 

                    <td>Page&nbsp;size:</td>

 

 

                    <td>

 

 

                        <asp:DropDownList ID="cboPageSize"

 

 

                            runat="server"

 

 

                            AutoPostBack="true"

 

 

                            OnSelectedIndexChanged="cboPageSize_SelectedIndexChanged">

 

 

 

                           <asp:ListItem Text="1" Value="1" />

 

 

                           <asp:ListItem Text="2" Value="2" />

 

 

                           <asp:ListItem Text="3" Value="3" />

 

 

                           <asp:ListItem Text="4" Value="4" />

 

 

                           <asp:ListItem Text="5" Value="5" />

 

 

                           <asp:ListItem Text="6" Value="6" />

 

 

                           <asp:ListItem Text="7" Value="7" />

 

 

                           <asp:ListItem Text="8" Value="8" />

 

 

                           <asp:ListItem Text="9" Value="9" />

 

 

                           <asp:ListItem Text="10" Value="10" />

 

 

                           <asp:ListItem Text="11" Value="11" />

 

 

                           <asp:ListItem Text="12" Value="12" />

 

 

                           <asp:ListItem Text="13" Value="13" />

 

 

                           <asp:ListItem Text="14" Value="14" />

 

 

                           <asp:ListItem Text="15" Value="15" />

 

 

                           <asp:ListItem Text="16" Value="16" />

 

 

                           <asp:ListItem Text="17" Value="17" />

 

 

                           <asp:ListItem Text="18" Value="18" />

 

 

                           <asp:ListItem Text="19" Value="19" />

 

 

                           <asp:ListItem Text="20" Value="20" />

 

 

                           <asp:ListItem Text="21" Value="21" />

 

 

                           <asp:ListItem Text="22" Value="22" />

 

 

                           <asp:ListItem Text="23" Value="23" />

 

 

                           <asp:ListItem Text="24" Value="24" />

 

 

                           <asp:ListItem Text="25" Value="25" />

 

 

                        </asp:DropDownList>

 

 

                    </td>

 

 

 

                    <td>

 

 

                        <img src="images/PagerSeparator.jpg" />

 

 

                    </td>

 

 

 

                    <td style="border-style:none;">

 

 

 

                        <asp:Button ID="Button1" runat="server"

 

 

                            CssClass="clsPagerButton"

 

 

                            BorderStyle="Ridge"

 

 

                            Text="|<"

 

 

                            Value="First"

 

 

                            CommandName="Page"

 

 

                            CausesValidation="false"

 

 

                            CommandArgument="First" />

 

 

                    </td>

 

 

                    <td style="border-style:none;">

 

 

 

                        <asp:Button ID="Button5" runat="server"

 

 

                            CssClass="clsPagerButton"

 

 

                            BorderStyle="Ridge"

 

 

                            Text="<"

 

 

                            Value="Prev"

 

 

                            CommandName="Page"

 

 

                            CausesValidation="false"

 

 

                            CommandArgument="Prev" />

 

 

                    </td>

 

 

 

                    <td>&nbsp;</td>

 

 

 

                    <td style="border-style:none;">

 

 

 

                        <asp:TextBox ID="tbPageNumber" runat="server"

 

 

                            Columns="3"

 

 

                            Text='<%# (int)DataBinder.Eval(Container, "OwnerTableView.CurrentPageIndex") + 1 %>' />

 

 

                        <asp:RangeValidator runat="Server" ID="RangeValidator1"

 

 

                            ControlToValidate="tbPageNumber"

 

 

                            EnableClientScript="true"

 

 

                            MinimumValue="1"

 

 

                            Type="Integer"

 

 

                            MaximumValue='<%# DataBinder.Eval(Container, "Paging.PageCount") %>'

 

 

                            ErrorMessage='<%# "Value must be in the range of 1 - " + DataBinder.Eval(Container, "Paging.PageCount") %>'

 

 

                            Display="Dynamic">

 

 

                        </asp:RangeValidator>

 

 

 

                    </td>

 

 

                    <td style="border-style:none;">

 

 

 

                        <asp:Button ID="Button4" runat="server"

 

 

                            CssClass="clsPagerButton"

 

 

                            BorderStyle="Ridge"

 

 

                            Text="Go"

 

 

                            Value="Go"

 

 

                            CommandName="CustomChangePage" />

 

 

                    </td>

 

 

 

                    <td>&nbsp;</td>

 

 

 

                    <td style="border-style:none;">

 

 

                        <asp:Button ID="Button6" runat="server"

 

 

                            CssClass="clsPagerButton"

 

 

                            BorderStyle="Ridge"

 

 

                            Text=">"

 

 

                            Value="Next"

 

 

                            CommandName="Page"

 

 

                            CausesValidation="false"

 

 

                            CommandArgument="Next" />

 

 

 

                    <td style="border-style:none;">

 

 

                        <asp:Button ID="Button7" runat="server"

 

 

                            CssClass="clsPagerButton"

 

 

                            BorderStyle="Ridge"

 

 

                            Text=">|"

 

 

                            Value="Last"

 

 

                            CommandName="Page"

 

 

                            CausesValidation="false"

 

 

                            CommandArgument="Last" />

 

 

                    </td>

 

 

 

                    <td>

 

 

                        <img src="images/PagerSeparator.jpg" />

 

 

                    </td>

 

 

 

                    <td style="border-style:none;width:100%" align="right">

 

 

                        <asp:LinkButton ID="LinkButton6" runat="server"

 

 

                            CssClass="RadGridPager"

 

 

                            CommandName="RebindGrid"

 

 

                            CausesValidation="false">

 

                            Refresh data

 

                        </asp:LinkButton>

 

 

                    </td>

 

 

                </tr>

 

 

            </table>

 

 

        </PagerTemplate>

 

 

 

        <Columns>

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="FULL_NAME"

 

 

                DataType="System.String"

 

 

                HeaderText="Employee name"

 

 

                Resizable="false"

 

 

                AllowFiltering="true"

 

 

                HeaderStyle-Width="200px"

 

 

                ItemStyle-BackColor="#aaaaaa"

 

 

                UniqueName="FullName" />

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="EMP_ID"

 

 

                DataType="System.Int32"

 

 

                HeaderText="Employee ID"

 

 

                Resizable="false"

 

 

                AllowFiltering="false"

 

 

                HeaderStyle-Width="100px"

 

 

                UniqueName="EmpID" />

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="SSN"

 

 

                DataType="System.String"

 

 

                HeaderText="SSN"

 

 

                Resizable="false"

 

 

                AllowFiltering="false"

 

 

                HeaderStyle-Width="125px"

 

 

                UniqueName="SSN" />

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="STATUS"

 

 

                DataType="System.String"

 

 

                HeaderText="Status"

 

 

                Resizable="false"

 

 

                AllowFiltering="false"

 

 

                HeaderStyle-Width="70px"

 

 

                UniqueName="STATUS" />

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="RUN_DTTM"

 

 

                DataType="System.String"

 

 

                HeaderText="Run date/time"

 

 

                Resizable="false"

 

 

                AllowFiltering="false"

 

 

                HeaderStyle-Width="150px"

 

 

                UniqueName="RUN_DTTM" />

 

 

 

            <telerik:GridBoundColumn

 

 

                DataField="PE_DATE"

 

 

                DataType="System.String"

 

 

                HeaderText="Period End"

 

 

                Resizable="false"

 

 

                AllowFiltering="false"

 

 

                HeaderStyle-Width="150px"

 

 

                UniqueName="PE_DATE" />

 

 

 

        </Columns>

 

 

 

        <RowIndicatorColumn>

 

 

            <HeaderStyle CssClass="ReportsCaption">

 

 

            </HeaderStyle>

 

 

        </RowIndicatorColumn>

 

 

 

        <ExpandCollapseColumn>

 

 

            <HeaderStyle CssClass="ReportsCaption">

 

 

            </HeaderStyle>

 

 

        </ExpandCollapseColumn>

 

 

 

        <ItemStyle CssClass="Reports" HorizontalAlign="Left" Wrap="false"></ItemStyle>

 

 

        <AlternatingItemStyle CssClass="Reports" HorizontalAlign="Left" Wrap="false"></AlternatingItemStyle>

 

 

        <HeaderStyle CssClass="ReportsCaption" HorizontalAlign="Left" Wrap="false"></HeaderStyle>

 

 

    </MasterTableView>

 

 

    <AlternatingItemStyle Wrap="false" CssClass="Reports" />

 

 

    <ItemStyle CssClass="Reports" Wrap="false" />

 

 

    <HeaderStyle Wrap="false" CssClass="ReportsCaption"/>

 

 

    <PagerStyle

 

 

        CssClass="Pager"

 

 

        Mode="NextPrevNumericAndAdvanced"

 

 

        Position="TopAndBottom"

 

 

        ShowPagerText="false" />

 

 

    <ActiveItemStyle CssClass="RadGridSelection" />

 

 

 

    <FilterMenu>

 

 

 

        <CollapseAnimation Type="OutQuint" Duration="200">

 

 

        </CollapseAnimation>

 

 

    </FilterMenu>

 

 

 

</telerik:RadGrid>

Thanks,
Peter

 

[Dimo]

Hi Peter,

I see that you are using custom CSS and declarative styles. In this case, please adher to the guidelines provided by me in the seventh post of this thread (Date: 9/9/2008 12:50:35 AM)

If you stumble upon difficulties, I suggest that you remove all padding and border styles for header and data cells and start from the beginning. In this way you will see what breaks the alignment.

By the way, it is easier to style RadGrid by using a custom skin, compared to not using a skin at all.

If you can't manage to get the borders to align, please send us all relevant CSS code.


Regards,
Dimo
the Telerik team

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

[Peter]

I double-checked to make sure the border and padding values are the same.

They are, however the problem is not really a mis-alignment issue.  I have set FrozenColumnsCount to 1, however when the grid starts to scroll right, columns 2 and 3 also do not scroll - The grid goes from displaying columns 1-2-3-4-5 to 1-2-3-5-6 and finally 1-3-4-5-6 (Column 4 disappears and then re-appears.)  Sometimes I get an extra grid line down through the middle of a column.  Also, extra blank columns and extraneous grid lines will appear and disappear depending upon how far over I scroll, how wide the grid is defined to be, and how wide the browser window is.

 

The headers for the "real" columns are always aligned with the data, which tells me I am not violating the rule of having the border and padding values matched up.

 

Please see this image file which shows the header corruption that occurs:

http://www.pyrobin.com/files/trashedheaders.jpg

NOTE: The green blocks were not part of the rendered page, they were added by me after capturing the images, to protect our customer's privacy.

Thanks,
Peter

[Dimo]

Hello Peter,

Here is a sample web page using RadGrid with scrolling, static headers, frozen columns and custom CSS. All gridlines are aligned as expected. Please examine the code and try to find out what's wrong in your implementation.

If you still have issues, send us a complete runnable example.

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

<script runat="server">

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 8;
    int rowsNum = 40;
    string colName = "Column";

    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }

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

        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, 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>RadControls for ASP.NET AJAX</title>
<style type="text/css">

.MyRadGrid
{
    border:1px solid #000;
}

.MyRadGrid table
{
    font:12px arial,sans-serif;
}

.MyMasterTable
{
    border-collapse:separate !important;
}

.MyRow td,
.MyAltRow td,
.MyFilterRow td,
.MyHeaderCell
{
    border:1px #ccc;
    border-style:none solid solid none;
    padding:3px 4px 3px 6px;
}

.MyHeaderCell
{
    background:#fee;
    text-align:left;
}

.MyHeaderCell,
.MyHeaderCell a
{
    text-decoration:none;
    color:#666;
}

.MyFilterRow
{
    background:#efe;
}

.MyPagerRow
{
    background:#eef;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="640px"
    AllowPaging="true"
    AllowSorting="true"
    AllowFilteringByColumn="true"
    Skin=""
    GridLines="None"
    CssClass="MyRadGrid"
    AutoGenerateColumns="false"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView CssClass="MyMasterTable">
        <HeaderStyle CssClass="MyHeaderCell" />
        <FilterItemStyle CssClass="MyFilterRow" />
        <ItemStyle CssClass="MyRow" />
        <AlternatingItemStyle CssClass="MyAltRow" />
        <PagerStyle CssClass="MyPagerRow" />
        <Columns>
            <telerik:GridBoundColumn DataField="Column1" HeaderText="Column 1" HeaderStyle-Width="200px" />
            <telerik:GridBoundColumn DataField="Column2" HeaderText="Column 2" HeaderStyle-Width="170px" />
            <telerik:GridBoundColumn DataField="Column3" HeaderText="Column 3" HeaderStyle-Width="130px" />
            <telerik:GridBoundColumn DataField="Column4" HeaderText="Column 4" HeaderStyle-Width="200px" />
            <telerik:GridBoundColumn DataField="Column5" HeaderText="Column 5" HeaderStyle-Width="170px" />
            <telerik:GridBoundColumn DataField="Column6" HeaderText="Column 6" HeaderStyle-Width="130px" />
            <telerik:GridBoundColumn DataField="Column7" HeaderText="Column 7" HeaderStyle-Width="200px" />
            <telerik:GridBoundColumn DataField="Column8" HeaderText="Column 8" HeaderStyle-Width="170px" />
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" />
        <Resizing AllowColumnResize="true" AllowRowResize="true" />
    </ClientSettings>
</telerik:RadGrid>

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

Best wishes,
Dimo
the Telerik team

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