RadGrid header and row text movement

[Erik]

I have an issue occuring with the RadGrids I use where the header text is shifted left and right when sorting.  The other issue occuring is when I use the onmouseover/out settings and change the row background style and usually when I hover over the last row or first row of the grid there is movement to the left of the item text or in cases of large amounts of text the rows are condensed a bit and moved to the left slightly....any ideas what is making this happen?
Below is my code and if it matters I'm using a master page layout.  Thanks for any help

 

<div class="behindGrid">

 

 

<p class="upperGridCaptionNew">

 

....some text here

 

</p>

 

 

<div class="behindGrid2Middle">

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" Gridlines="none"

 

 

OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" Width="98%" OnSortCommand="RadGrid1_Sorted" OnNeedDataSource="RadGrid1_Reload" PageSize="14" Skin="CustomSkin" EnableEmbeddedSkins="false">

 

 

<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric"/>

 

 

<ClientSettings EnablePostBackOnRowClick="true">

 

 

 

<Selecting AllowRowSelect="true" />

 

 

<ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />

 

 

</ClientSettings>

 

 

<MasterTableView>

 

 

<Columns>

 

 

<telerik:GridButtonColumn HeaderStyle-HorizontalAlign="Center" DataTextField="GroupSite"

 

 

HeaderText="Group / Site" SortExpression="GroupSite" UniqueName="GroupSite" CommandName="Select">

 

 

</telerik:GridButtonColumn>

 

 

<telerik:GridBoundColumn DataField="GroupSite" HeaderText="GroupSite" SortExpression="GroupSite" UniqueName="GroupSite" Visible="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Blah" HeaderText="Blah Site" SortExpression="Blah" UniqueName="Blah" Visible="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Status" HeaderText="Status" SortExpression="Status" ItemStyle-HorizontalAlign="Center" UniqueName="Status">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Items" HeaderText="Items" SortExpression="Items" UniqueName="Items">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

 

 

</div>

 

 

<div class="behindGridBottom"></div>

 

 

</div>

 

function

 

RowMouseOver(sender, eventArgs)

 

{

$get(eventArgs.get_id()).className =

"RowMouseOver";

 

}

 

function RowMouseOut(sender, eventArgs)

 

{

$get(eventArgs.get_id()).className =

"RowMouseOut";

 

}

.RowMouseOver

 

TD

 

{

 

 

border-bottom:solid 1px silver;

 

 

background-color:#E4E5D7;

 

 

color:#B45F04 !important;

 

 

padding-top:0px;

 

 

padding-bottom:0px;

 

 

border-top:solid 1px silver;

 

 

text-align:center;

 

}

 

 

.RowMouseOver A

 

{

 

background-repeat:repeat-x;

 

 

background-color:Transparent;

 

 

color:#B45F04 !important;

 

 

text-align:center;

 

 

 

 

}

 

 

.RowMouseOut

 

{

 

 

background: #f7f7f7;

 

 

background-image:url('Images/rowUnHover.png');

 

 

background-position:center top;

 

 

background-repeat: no-repeat;

 

 

text-align:center;

 

}

[Dimo]

Hello Erik,

The header text moves because it is centered and the sort icons occupy some additional space when displayed. There is no straightforward way to prevent this unless you align the header text to the left.

I also advise you to change your mouseover and mouseout Javascript code as follows:

function RowMouseOver(sender, eventArgs)
{
    Sys.UI.DomElement.addCssClass($get(eventArgs.get_id()), "RowMouseOver");
}

function RowMouseOut(sender, eventArgs)
{
    Sys.UI.DomElement.removeCssClass($get(eventArgs.get_id()), "RowMouseOver");
    Sys.UI.DomElement.addCssClass($get(eventArgs.get_id()), "RowMouseOut");
}


In this way the original RadGrid row CSS classes will be preserved and you should not see row text moving to the left. By the way, I suggest you not to change padding styles on mouse over:


.RowMouseOver TD
{
border-bottom:solid 1px silver;
background-color:#E4E5D7;
color:#B45F04 !important;
padding-top:0px;
padding-bottom:0px;
border-top:solid 1px silver;
text-align:center;
}


Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Erik]

Dimo,
Thanks for your response.  Your suggestions worked perfectly to fix the text movement.  The grid header thing is kind of a bummer there to have to set it to a left justification as this kind of removes some options you have. 
Again, thanks for your working response.