This is a migrated thread and some comments may be shown as answers.

Column misalignment with Static Headers and Scrolling

23 Answers 1606 Views

Grid

This is a migrated thread and some comments may be shown as answers.

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

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?

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

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

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.

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

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.

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.

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.

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.

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

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

commented on 08 Jul 2021, 08:13 PM

Yes, the issue persists.... I will submit a support ticket.