Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Column misalignment with Static Headers and Scrolling

23 Answers 1301 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Geoff
Top achievements
Rank 1
Geoff asked on 29 Sep 2011, 09:32 PM
image1.jpg
image2.jpg
image3.jpg
image4.jpg
Hello,

I've encountered a puzzling issue with the RadGrid when using static headers and scrolling. Initially, when there is no scrolling necessary, the grid renders as expected (see image 1).

However, once I add a new record that causes scrolling to occur, the grid expands horizontally, causing a horizontal scrollbar in the window, and the grid rows are no longer aligned with their headers (see image 2).

Oddly enough, the grid realigns itself when I move the cursor over one of the drop-down template items (see image 3).

Here is my grid definition:
<telerik:RadGrid ID="dtgUses" runat="server" AllowSorting="true" AllowMultiRowEdit="true"
                        AllowFilteringByColumn="true" PageSize="5" AutoGenerateColumns="false" ShowFooter="true"
                        EnableHeaderContextMenu="true" Width="96%" EnableHeaderContextFilterMenu="true"
                        OnPreRender="dtgUses_PreRender" OnNeedDataSource="dtgUses_NeedDataSource" OnItemDataBound="dtgUses_ItemDataBound"
                        OnItemCommand="dtgUses_ItemCommand" AllowCustomPaging="true">
                        <ClientSettings AllowGroupExpandCollapse="true">
                            <Scrolling AllowScroll="true" ScrollHeight="125px" UseStaticHeaders="true" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                        <MasterTableView DataKeyNames="Id" GroupLoadMode="Server" AllowNaturalSort="true"
                            ShowGroupFooter="true" ItemStyle-Wrap="false" CommandItemDisplay="Top" CommandItemSettings-ShowRefreshButton="False"
                            EditMode="InPlace" IsFilterItemExpanded="false" FooterStyle-Wrap="false" TableLayout="Fixed">
                            <Columns>
                                <telerik:GridTemplateColumn UniqueName="Use" HeaderText="Occupancy" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="125px" SortExpression="UseCodeDescr">
                                    <ItemTemplate>
                                        <%# Eval("UseCodeDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbUseCode" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn UniqueName="Quality" HeaderText="Grade" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="QualityShortDescr">
                                    <ItemTemplate>
                                        <%# Eval("QualityShortDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbQuality" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn UniqueName="Condition" HeaderText="Cond" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="ConditionShortDescr">
                                    <ItemTemplate>
                                        <%# Eval("ConditionShortDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbCondition" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="EffectiveYearBuilt" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Eff. Year" HeaderStyle-Width="50px"
                                    SortExpression="EffectiveYearBuilt" UniqueName="EffectiveYearBuilt" DataType="System.Int16">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="YearRemodeled" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Remodel Year" HeaderStyle-Width="75px"
                                    SortExpression="YearRemodeled" UniqueName="YearRemodeled" DataType="System.Int16"
                                    FooterText="Total Area:" FooterStyle-HorizontalAlign="Right">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="ActualArea" HeaderButtonType="TextButton" ItemStyle-HorizontalAlign="Right"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Actual Area" HeaderStyle-Width="50px"
                                    ReadOnly="true" SortExpression="ActualArea" UniqueName="ActualArea" Aggregate="Sum"
                                    FooterAggregateFormatString="{0:G}" DataType="System.Decimal" FooterStyle-HorizontalAlign="Right">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Percent" HeaderButtonType="TextButton" DataType="System.Decimal"
                                    HeaderStyle-HorizontalAlign="Right" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Right"
                                    HeaderText="% of Section" SortExpression="Percent" UniqueName="PercentOfSection"
                                    DataFormatString="{0:P}" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn UniqueName="Delete" CommandName="Delete" ButtonType="ImageButton"
                                    HeaderStyle-Width="20px" ImageUrl="~/skins/GovernBlue/Telerik/Grid/Delete.gif"
                                    ConfirmText="Are you sure you want to delete this use?" ItemStyle-HorizontalAlign="Center"
                                    ShowInEditForm="true" />
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>


What I'd really like is for the grid to maintain its alignment at all times (see image 4). The grid works just fine without static headers, but I need to keep the static headers because that is part of the requirement. I've spent hours researching these forums and tried countless solutions that have been suggested in other threads to no avail. Is there something I'm missing here? Thanks!

23 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 Sep 2011, 05:39 AM
Hi Geoff,

I tried the same and I have also got the issue.When I set the property "ItemStyle-HorizontalAlign"  in all GridBoundColumns I got the alignment correctly.
Another approach is just set the cell side  padding (CSS).

Thanks,
Princy.
0
Geoff
Top achievements
Rank 1
answered on 30 Sep 2011, 03:17 PM
image1.jpg
image2.jpg
Princy,

Thanks for your reply. I tried setting the horizontal alignment as you suggested, but it didn't make a difference. The good news is that when I removed the explicit size from the delete button column, I was able to get the other columns to align correctly. However, the bad news is that the vertical scrollbar still appears inside the detail area, rather than outside of it (see image 1).

Once again, when i mouse over one of the drop-down boxes, the delete column and scrollbars shift to their correct location (see image 2).

Also, when adding new records, the grid still expands horizontally, which is undesirable.

Here is the updated grid definition:
<telerik:RadGrid ID="dtgUses" runat="server" AllowSorting="true" AllowMultiRowEdit="true"
    AllowFilteringByColumn="true" PageSize="5" AutoGenerateColumns="false" ShowFooter="true"
    EnableHeaderContextMenu="true" Width="96%" EnableHeaderContextFilterMenu="true"
    OnPreRender="dtgUses_PreRender" OnNeedDataSource="dtgUses_NeedDataSource" OnItemDataBound="dtgUses_ItemDataBound"
    OnItemCommand="dtgUses_ItemCommand" AllowCustomPaging="true">
    <ClientSettings AllowGroupExpandCollapse="true">
        <Scrolling AllowScroll="true" ScrollHeight="125px" UseStaticHeaders="true" />
    </ClientSettings>
    <PagerStyle Mode="NextPrevAndNumeric" />
    <MasterTableView DataKeyNames="Id" GroupLoadMode="Server" AllowNaturalSort="true"
        ShowGroupFooter="true" ItemStyle-Wrap="false" CommandItemDisplay="Top" CommandItemSettings-ShowRefreshButton="False"
        EditMode="InPlace" IsFilterItemExpanded="false" FooterStyle-Wrap="false" TableLayout="Fixed">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="Use" HeaderText="Occupancy" HeaderButtonType="TextButton"
                HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="125px" SortExpression="UseCodeDescr">
                <ItemTemplate>
                    <%# Eval("UseCodeDescr")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="cbUseCode" DataTextField="Descr" DataValueField="Id"
                        Width="100%" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="Quality" HeaderText="Grade" HeaderButtonType="TextButton"
                HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="QualityShortDescr">
                <ItemTemplate>
                    <%# Eval("QualityDescr")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="cbQuality" DataTextField="Descr" DataValueField="Id"
                        Width="100%" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="Condition" HeaderText="Cond" HeaderButtonType="TextButton"
                HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="ConditionShortDescr">
                <ItemTemplate>
                    <%# Eval("ConditionDescr")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="cbCondition" DataTextField="Descr" DataValueField="Id"
                        Width="100%" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="EffectiveYearBuilt" HeaderButtonType="TextButton"
                HeaderStyle-HorizontalAlign="Right" HeaderText="Eff. Year" HeaderStyle-Width="50px"
                ItemStyle-HorizontalAlign="Right" SortExpression="EffectiveYearBuilt" UniqueName="EffectiveYearBuilt"
                DataType="System.Int16">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="YearRemodeled" HeaderButtonType="TextButton"
                HeaderStyle-HorizontalAlign="Right" HeaderText="Remodel Year" HeaderStyle-Width="75px"
                SortExpression="YearRemodeled" UniqueName="YearRemodeled" DataType="System.Int16"
                ItemStyle-HorizontalAlign="Right" FooterText="Total Area:" FooterStyle-HorizontalAlign="Right">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ActualArea" HeaderButtonType="TextButton" ItemStyle-HorizontalAlign="Right"
                HeaderStyle-HorizontalAlign="Right" HeaderText="Actual Area" HeaderStyle-Width="50px"
                ReadOnly="true" SortExpression="ActualArea" UniqueName="ActualArea" Aggregate="Sum"
                FooterAggregateFormatString="{0:G}" DataType="System.Decimal" FooterStyle-Width="50px"
                FooterStyle-HorizontalAlign="Right">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Percent" HeaderButtonType="TextButton" DataType="System.Decimal"
                ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" HeaderStyle-Width="50px"
                HeaderText="% of Section" SortExpression="Percent" UniqueName="PercentOfSection"
                DataFormatString="{0:P}" ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn UniqueName="Delete" CommandName="Delete" ButtonType="ImageButton"
                ImageUrl="~/skins/GovernBlue/Telerik/Grid/Delete.gif" ConfirmText="Are you sure you want to delete this use?"
                ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ShowInEditForm="true" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Any ideas?
0
Geoff
Top achievements
Rank 1
answered on 04 Oct 2011, 08:04 PM
Another poke on this one.
0
Pavlina
Telerik team
answered on 05 Oct 2011, 09:59 PM
browser-behaviour.zip
Hi Geoff,

In previous version of RadControls there was an empty space in header above the scroll. The exception was only in some versions of IE. We made the RadGrid to behave in the same way in all browser and now it looks this way in IE. The reason that we do not fill the empty space in our new releases is that this will make a breaking change for some of old projects. We have to change the rendering of the RadGrid.

However, you can fix this problem by making a new image exactly like header and footer and set it as background of RadGrid with the following CSS:
div.RadGrid
{
    background: #eeeeee url('header_bgr.gif') repeat-x 100% 0;
}
   
.rgDataDiv
{
    background: #fff;
    border-bottom: 1px solid #828282;
}
   
div.RadGrid_Telerik .rgFooter td
{
    border-top: 0 none;
}

I am also attaching a sample project. Please give it a try and let me know if any questions arise.

Best wishes,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Geoff
Top achievements
Rank 1
answered on 06 Oct 2011, 01:34 PM
Pavlina,

Thank you for the suggestion. I may give that a try.

However, my issue isn't so much with the space above the scrollbar as seen in image2. My issue is that the scrollbar first appears INSIDE the grid content area as seen in image1. After the user mouses over one of the drop-down template items, the scrollbar shifts to outside of the content area (image2). This behavior is undesirable and I need the scrollbar to render outside the detail area without having to mouse over the grid.
0
Pavlina
Telerik team
answered on 07 Oct 2011, 08:28 AM
Hello Geoff,

I was able to replicate the described issue only in Quirks mode, in Standard mode the issue does not persists. Therefore to resolve this problem you should add doctype declaration. Please refer to the link below for more information about recommended Doctype Declarations
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Best wishes,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Geoff
Top achievements
Rank 1
answered on 07 Oct 2011, 02:16 PM
Pavlina,

You are correct. I switched to standard mode and this problem is no longer prevalent. Thank you!!

Geoff
0
Neil
Top achievements
Rank 1
answered on 12 Jan 2012, 09:31 PM
1.GIF
2.GIF
I'm having the same issue.  Please see attached files. I've tried the CSS fix you have included, and that did not work.

The alignment corrected itself when I increased the size of my web browser.
0
Pavlina
Telerik team
answered on 13 Jan 2012, 09:21 AM
Hello Neil,

Can you please verify that the TableLayout property of the MasterTableView is set to Fixed? Also, if you set width of the columns, please make sure that you are using HeaderStyle-Width property? Note that It is not recommended to use ItemStyle-Width for setting columns width.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Neil
Top achievements
Rank 1
answered on 17 Jan 2012, 06:18 PM
Pavlina,

I have set the TableLayout="Fixed" as you suggested and can confirm that the column width properties are being set with HeaderStyle(s).  I'm still having the problems of the columns not aligning with the header.

Regards,
Neil
0
Pavlina
Telerik team
answered on 19 Jan 2012, 06:45 PM
Hello Neil,

Can you please download the latest version of RadControls and let me know if the problem still persists? Also, it will be of great help if you can send us the problematic code, so that we can test it locally.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
James
Top achievements
Rank 1
answered on 28 Oct 2013, 04:08 PM
Image1.JPG
I realize this is an old thread but i'm experiencing the same issue and have tried the suggestions mentioned but they are not correcting my issue.  I'm using the ASP.Net Ajax controls, version 2013.2.717.35.

My DocType decleration is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

My CSS settings include the following:
div.RadGrid
{
    background: #eeeeee url('header_bgr.gif') repeat-x 100% 0;
}
 
.rgDataDiv
{
    background: #fff;
    border-bottom: 1px solid #828282;
}
 
div.RadGrid_Telerik .rgFooter td
{
    border-top: 0 none;
}

My Grid decleration is:
<telerik:RadGrid ID="rgTMR" runat="server" AutoGenerateColumns="False"
    Width="1175" Height="300" CellSpacing="0" CellPadding="0" GridLines="None" AllowMultiRowSelection="false">
    <MasterTableView TableLayout="Fixed" ClientDataKeyNames="JobNumber" DataKeyNames="TMRID, WFRI_ID, JobNumber, IsMaterial">
        <Columns>
            <telerik:GridImageColumn UniqueName="GridImageColumn" HeaderText="Balance Remaining"
                HeaderStyle-Width="50" ItemStyle-HorizontalAlign="Center">
                </telerik:GridImageColumn>
            <telerik:GridBoundColumn DataField="WorkDate" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="100px" HeaderText=" Work Date" ItemStyle-Font-Size="8pt" UniqueName="WorkDate">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="WorkHoursReg" DataFormatString="{0:0.00}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Regular Work Hours"
                ItemStyle-Font-Size="8pt" UniqueName="WorkHoursReg">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="WorkHoursOT" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="50px" HeaderText="Overtime Work Hours" ItemStyle-Font-Size="8pt"
                UniqueName="WorkHoursOT">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="WorkHoursH" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="50px" HeaderText="Holiday Work Hours" ItemStyle-Font-Size="8pt"
                UniqueName="WorkHoursH">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TravelHours" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="50px" HeaderText="Travel Hours" ItemStyle-Font-Size="8pt"
                UniqueName="TravelHours">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PartNumber" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="100px" HeaderText="Part Number" ItemStyle-Font-Size="8pt"
                UniqueName="PartNumber">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PartDesc" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="100px" HeaderText="Part Description" ItemStyle-Font-Size="8pt"
                UniqueName="PartDesc">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Quantity" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="50px" HeaderText="Quantity" ItemStyle-Font-Size="8pt" UniqueName="Quantity">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="UnitCost" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Unit Cost" ItemStyle-Font-Size="8pt"
                ItemStyle-HorizontalAlign="Right" UniqueName="UnitCost">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ExtCost" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Ext Cost" ItemStyle-Font-Size="8pt"
                ItemStyle-HorizontalAlign="Right" UniqueName="ExtCost">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="UnitBillable" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Unit Billable"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" UniqueName="UnitBillable">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ExtBillable" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Ext Billable" ItemStyle-Font-Size="8pt"
                ItemStyle-HorizontalAlign="Right" UniqueName="ExtBillable">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="MaterialAmt" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Material Amount"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px"
                UniqueName="MaterialAmt">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="InstAmountReg" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Regular Installation Amount"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px"
                UniqueName="InstAmountReg">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="InstAmountOT" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Overtime Installation Amount"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px"
                UniqueName="InstAmountOT">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="InstAmountH" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Holiday Installation Amount"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px"
                UniqueName="InstAmountH">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TravelAmount" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Travel Installation Amount"
                ItemStyle-Font-Size="8pt" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px"
                UniqueName="TravelAmount">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TotalAmount" DataFormatString="{0:C}" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Total Amount" ItemStyle-Font-Size="8pt"
                ItemStyle-HorizontalAlign="Right" UniqueName="TotalAmount">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Created" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="75px" HeaderText="Created" ItemStyle-Font-Size="8pt" ItemStyle-Width="75px"
                UniqueName="Created">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedBy" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="75px" HeaderText="Created By" ItemStyle-Font-Size="8pt" ItemStyle-Width="75px"
                UniqueName="CreatedBy">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastModifiedBy" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="75px" HeaderText="Last Modified By" ItemStyle-Font-Size="8pt"
                UniqueName="LastModifiedBy">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastModified" HeaderStyle-Font-Size="8pt" HeaderStyle-Height="100"
                HeaderStyle-Width="75px" HeaderText="Last Modified" ItemStyle-Font-Size="8pt"
                UniqueName="LastModified">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="AvailBal" UniqueName="AvailBal" Visible="true"
                HeaderStyle-CssClass="" ItemStyle-CssClass="" HeaderStyle-Font-Size="8pt"
                HeaderStyle-Height="100" HeaderStyle-Width="50px" HeaderText="Avail Bal" ItemStyle-Font-Size="8pt">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ItemStyle Font-Names="Arial,Helvetica,sans-serif" Font-Size="9pt" Wrap="false" />
    <ClientSettings AllowColumnHide="true" ColumnsReorderMethod="Reorder">
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" EnableVirtualScrollPaging="False" SaveScrollPosition="true"
            UseStaticHeaders="true">
        </Scrolling>
    </ClientSettings>
</telerik:RadGrid>

When the number of rows in the grid forces the grid to have a vertical scroll-bar, the columns in the grid become misaligned with their column headings only when you scroll all the way to the right (see image below).

Thank you

James
0
CUIAB
Top achievements
Rank 1
answered on 30 Oct 2013, 08:09 PM
grid-headers.png
I don't know if this can be of help.  I'm experiencing the same issue but for 2013.3 (see attached) 

I sent Telerik support a test project and they were able to observe this problem.  Currently waiting on them to confirm its a bug and/or for a resolution. 

0
Pavlina
Telerik team
answered on 08 Nov 2013, 04:56 PM
Hi,

The problem reported by Sandra Garcia is already resolved and the fix will be included in the upcoming Q3 2013 SP1 which will be released next week.

Regards,
Pavlina
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Drew
Top achievements
Rank 1
answered on 13 Nov 2013, 03:30 PM
Has this been released yet?
0
Pavlina
Telerik team
answered on 13 Nov 2013, 05:09 PM
Hi,

The SP1 release in which this fix is included is scheduled for tomorrow.

Regards,
Pavlina
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
cha
Top achievements
Rank 1
answered on 02 Jan 2014, 08:11 PM
mis-alignment.gif
I downloaded the latest Service pack  2013.3.1114.40 and this issue is still not resolved. I had tried this with previous versions 2012.2.607.40 and 2013.2.611.40. It works fine on Chrome but none of IE browsers. (  I tested on IE 8).
Attached is the screenshot of mis-alignment.  If you have a wide table like I have and scroll horizontally then the column alignment between header and data is lost. It gets rectified when you scroll completely to the right. It really does not look good if some one wants to analyze the data when scrolled half way.

0
cha
Top achievements
Rank 1
answered on 03 Jan 2014, 07:13 PM
Any update on this issue ? Appreciate your help.
0
cha
Top achievements
Rank 1
answered on 06 Jan 2014, 09:17 PM
I was able to resolve this issue by including the border for the header as well. Earlier I had included right and bottom border for the data by overriding the css class as follows.

       .RadGrid .rgRow td { border-style:solid;border-width:0 1px 1px 0; border-color:silver silver silver silver; }                

Now I included the border for the header as well(with same border color as background) so border gets hidden.

.RadGrid .rgHeader {border-style:solid;border-width:0 1px 1px 0; border-color:#eaeaea #eaeaea #eaeaea #eaeaea;}

Also, removed all the paddings I had included for the .RadGrid .rgRow td class.

0
Pavlina
Telerik team
answered on 07 Jan 2014, 03:51 PM
Hi,

We are glad to hear that you managed to resolve this issue on your own. Please do not hesitate to contact us if other questions or problems arise.

Regards,
Pavlina
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
TOMASZ
Top achievements
Rank 1
answered on 28 Aug 2019, 11:51 AM
2019-08-28_13h46_15.png

I was reviewing posts about the problem and it seems they don't help my case. I am using the newer version of Telerik.Web.UI and the bug still exists. My version is 2016.1.127.45.

Can you help me to fix the problem somehow?

You can see the issue in the image attached in this post.
It occurs when horizontal scroll is moved to a right edge.

0
Attila Antal
Telerik team
answered on 02 Sep 2019, 07:48 AM

Hi Tomasz,

When Scrolling is enabled along with Static headers columns must define a static width. This is described in the Scroll with Static Headers article. 

Here is a KB article addressing this issue and suggests several solutions: Misaligned Columns in RadGrid with Scrolling Enabled

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 02 Jul 2021, 07:12 PM | edited on 02 Jul 2021, 07:15 PM

I thought I would bring up this old thread because I am having the same issues after trying all the suggestions. When I set the scrolling as: 
<Scrolling AllowScroll="true" UseStaticHeaders="true"  />

The columns do not align with the Header. Also, the Footer does not align with the Header or the Grid Data.

Here is my code:


	<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="sdsItemComply_top" ShowFooter="True" Width="80%" PageSize="25">
			
			<GroupingSettings CollapseAllTooltip="Collapse all groups" />

			<ExportSettings ExportOnlyData="True" HideStructureColumns="True" OpenInNewWindow="True">
				<Excel FileExtension="xlsx" Format="Xlsx" />
			</ExportSettings>

			<ClientSettings>
				<Selecting AllowRowSelect="True" />
				<Scrolling AllowScroll="false" UseStaticHeaders="true"  />
			</ClientSettings>

			<MasterTableView DataSourceID="sdsItemComply_top" DataKeyNames="ItemNumber,ContractNum" CommandItemDisplay="Top" ShowFooter="true" TableLayout="Fixed" GridLines="Vertical" 
				 AllowPaging="true" PageSize="25" >

				<PagerStyle AlwaysVisible="true" PageSizes="25;50;100;500" />

				<ColumnGroups>
					<telerik:GridColumnGroup Name="wk1" HeaderText="Week 1" HeaderStyle-HorizontalAlign="Center">
						<HeaderStyle HorizontalAlign="Center" />
					</telerik:GridColumnGroup>
					<telerik:GridColumnGroup Name="wk2" HeaderText="Week 2" HeaderStyle-HorizontalAlign="Center">
						<HeaderStyle HorizontalAlign="Center" />
					</telerik:GridColumnGroup>
				</ColumnGroups>

				<HeaderStyle Font-Bold="true" HorizontalAlign="Center"  />
				<FooterStyle Font-Bold="true" />
				<ItemStyle Wrap="false" />

				<CommandItemSettings ShowAddNewRecordButton="False" ShowExportToExcelButton="True" ShowRefreshButton="False" ExportToExcelImageUrl="../../Images/Excel-icon.png" ExportToExcelText="" />

				<Columns>

					<telerik:GridButtonColumn Text="Select" CommandName="Select" ButtonType="LinkButton">
					</telerik:GridButtonColumn>

					<telerik:GridBoundColumn DataField="ContractNum" FilterControlAltText="Filter ContractNumber column" HeaderText="Contract #" SortExpression="ContractNum" UniqueName="ContractNum">
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="ItemNumber" FilterControlAltText="Filter ItemNumber column" HeaderText="Item #" ReadOnly="True" SortExpression="ItemNumber" UniqueName="ItemNumber">
						<ItemStyle HorizontalAlign="Right" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="ItemDesc" FilterControlAltText="Filter ItemDesc column" HeaderText="Description" ReadOnly="True" SortExpression="ItemDesc" UniqueName="ItemDesc">
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="ContractCount" DataType="System.Int32" FilterControlAltText="Filter ContractCount column" HeaderText="Contract Count" ReadOnly="True" SortExpression="ContractCount" UniqueName="ContractCount" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="Compliant" DataType="System.Int32" FilterControlAltText="Filter Compliant column" HeaderText="Compliant" ReadOnly="True" SortExpression="Compliant" UniqueName="Compliant" ColumnGroupName="wk1" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="LowStock" DataType="System.Int32" FilterControlAltText="Filter LowStock column" HeaderText="Low Stock" ReadOnly="True" SortExpression="LowStock" UniqueName="LowStock" ColumnGroupName="wk1" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="NonCompliant" DataType="System.Int32" FilterControlAltText="Filter NonCompliant column" HeaderText="Non Compliant" ReadOnly="True" SortExpression="NonCompliant" UniqueName="NonCompliant" ColumnGroupName="wk1" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="NoResponse" DataType="System.Int32" FilterControlAltText="Filter NoResponse column" HeaderText="No Response" ReadOnly="True" SortExpression="NoResponse" UniqueName="NoResponse" ColumnGroupName="wk1" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="Compliant2" DataType="System.Int32" FilterControlAltText="Filter Compliant2 column" HeaderText="Compliant" ReadOnly="True" SortExpression="Compliant2" UniqueName="Compliant2" ColumnGroupName="wk2" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="LowStock2" DataType="System.Int32" FilterControlAltText="Filter LowStock2 column" HeaderText="Low Stock" ReadOnly="True" SortExpression="LowStock2" UniqueName="LowStock2" ColumnGroupName="wk2" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="NonCompliant2" DataType="System.Int32" FilterControlAltText="Filter NonCompliant2 column" HeaderText="Non Compliant" ReadOnly="True" SortExpression="NonCompliant2" UniqueName="NonCompliant2" ColumnGroupName="wk2" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="NoResponse2" DataType="System.Int32" FilterControlAltText="Filter NoResponse2 column" HeaderText="No Response" ReadOnly="True" SortExpression="NoResponse2" UniqueName="NoResponse2" ColumnGroupName="wk2" Aggregate="Sum" FooterAggregateFormatString="{0:n0}">
						<ItemStyle HorizontalAlign="Center" />
						<FooterStyle HorizontalAlign="Center" />
					</telerik:GridBoundColumn>

					<telerik:GridBoundColumn DataField="compPercent" DataType="System.Decimal" FilterControlAltText="Filter Compliance Percent column" HeaderText="Compliance %" ReadOnly="true" SortExpression="compPercent" UniqueName="compPercent" DataFormatString="{0:p}" Aggregate="Custom" FooterAggregateFormatString="{0:p}">
						<ItemStyle HorizontalAlign="Right" />
						<FooterStyle HorizontalAlign="Right" />
					</telerik:GridBoundColumn>

				</Columns>
			</MasterTableView>
		</telerik:RadGrid>

I am using version 2021 R1. Any new solutions?

Thanks

Eric R | Senior Technical Support Engineer
Telerik team
commented on 07 Jul 2021, 02:01 PM

Thank you for providing the Grid Markup. From it, I can see the columns are missing a width declaration. This is required when using Scroll with Static Headers. For reference to this, see Option 1 in the Misaligned Columns in RadGrid with Scrolling Enabled article.

If the issues persists after making the recommended changes, please create a support ticket with a working sample that reproduces the issue. Thank you.

SMc
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 08 Jul 2021, 08:13 PM

Yes, the issue persists.... I will submit a support ticket.
Tags
Grid
Asked by
Geoff
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Geoff
Top achievements
Rank 1
Pavlina
Telerik team
Neil
Top achievements
Rank 1
James
Top achievements
Rank 1
CUIAB
Top achievements
Rank 1
Drew
Top achievements
Rank 1
cha
Top achievements
Rank 1
TOMASZ
Top achievements
Rank 1
Attila Antal
Telerik team
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or