Column misalignment with Static Headers and Scrolling

21 posts, 0 answers
  1. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 29 Sep 2011 Link to this post

    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!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Sep 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 30 Sep 2011 Link to this post

    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?
  5. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 04 Oct 2011 Link to this post

    Another poke on this one.
  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 05 Oct 2011 Link to this post

    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
  7. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 06 Oct 2011 Link to this post

    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.
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Oct 2011 Link to this post

    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
  9. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 07 Oct 2011 Link to this post

    Pavlina,

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

    Geoff
  10. Neil
    Neil avatar
    3 posts
    Member since:
    Jun 2012

    Posted 12 Jan 2012 Link to this post

    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.
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Jan 2012 Link to this post

    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
  12. Neil
    Neil avatar
    3 posts
    Member since:
    Jun 2012

    Posted 17 Jan 2012 Link to this post

    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
  13. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Jan 2012 Link to this post

    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
  14. James
    James avatar
    16 posts
    Member since:
    Dec 2011

    Posted 28 Oct 2013 Link to this post

    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
  15. CUIAB
    CUIAB avatar
    2 posts
    Member since:
    Dec 2012

    Posted 30 Oct 2013 Link to this post

    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. 

  16. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 08 Nov 2013 Link to this post

    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.
  17. Drew
    Drew avatar
    1 posts
    Member since:
    Sep 2012

    Posted 13 Nov 2013 Link to this post

    Has this been released yet?
  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Nov 2013 Link to this post

    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.
  19. cha
    cha avatar
    20 posts
    Member since:
    Mar 2011

    Posted 02 Jan 2014 Link to this post

    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.

  20. cha
    cha avatar
    20 posts
    Member since:
    Mar 2011

    Posted 03 Jan 2014 Link to this post

    Any update on this issue ? Appreciate your help.
  21. cha
    cha avatar
    20 posts
    Member since:
    Mar 2011

    Posted 06 Jan 2014 Link to this post

    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.

  22. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Jan 2014 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017