Column Headers and their sorted apperance

[SSirica]

So I have a Grid with a header that is multiple lined.  I allow my user to sort the grid on any of the columns.  When they click the column header to perform said sort, the column header get odd looking.  I don't know how to exactly describe it so I have attached screen shots of the header when the grid 1st comes up and one after sorting.  I have also included my grid source code.

    DataSourceID="sqlResults" AllowPaging="True" GridLines="Both"
    AllowSorting="True" AutoGenerateColumns="False" BackColor="WhiteSmoke"
    HorizontalAlign="Left" Font-Names="Verdana" Font-Size="10px"
    Skin="Windows7" Height="500px">
    <ClientSettings AllowDragToGroup="False">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" FrozenColumnsCount="4" />
        <Selecting AllowRowSelect="True" />
        <Resizing AllowColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
    </ClientSettings>
    <AlternatingItemStyle Font-Names="Verdana" Font-Size="9px"
        BackColor="#CCFFCC" VerticalAlign="Top" />
    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" BackColor="#3366CC"
        ForeColor="White" Wrap="False" Height="35px" />
    <ItemStyle Font-Names="Verdana" Font-Size="9px" BackColor="WhiteSmoke" VerticalAlign="Top" />
    <MasterTableView AllowMultiColumnSorting="True" GridLines="Both">
        <CommandItemSettings ExportToPdfText="Export to Pdf" />
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px" />
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="act_tick_id"
                FilterControlAltText="Filter column column" UniqueName="ID" Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Target_DT"
                FilterControlAltText="Filter column column"  HeaderStyle-Width="88px"
                HeaderText="Target Close<br />Date & Time" UniqueName="TargDT" DataType="System.DateTime"  DataFormatString="{0:MM/dd/yyyy hh:mm tt}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="priority_code"
                FilterControlAltText="Filter Priority column" HeaderText="Priority"
                UniqueName="Priority"  HeaderStyle-Width="55px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="act_step_ticket_num"
                FilterControlAltText="Filter column column" HeaderText="Ticket #"
                UniqueName="Ticketnum" AutoPostBackOnFilter="True">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="acct_number"
                FilterControlAltText="Filter column column" HeaderText="Account #"
                UniqueName="AcctNum">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="line_num"
                FilterControlAltText="Filter column column" HeaderText="Line #"
                UniqueName="LineNum">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="act_step_open_csr"
                FilterControlAltText="Filter column column" HeaderText="Open By"
                UniqueName="OpenBy">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="user_group_code"
                FilterControlAltText="Filter column column" HeaderText="Current<br />Group"
                UniqueName="CurrGrp">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="user_first"
                FilterControlAltText="Filter column column" HeaderText="Member"
                UniqueName="Member">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="act_code"
                FilterControlAltText="Filter column column" HeaderText="Action<br />Code"
                UniqueName="ActCode">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="status_desc"
                FilterControlAltText="Filter column column" HeaderText="Status"
                UniqueName="Status">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Open_DT"
                FilterControlAltText="Filter column column" HeaderText="Open<br />Date & Time"
                UniqueName="Open_DT"  HeaderStyle-Width="88px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Phase_DT"
                FilterControlAltText="Filter column column" HeaderText="Phase<br />Date & Time"
                UniqueName="Phase_DT"  HeaderStyle-Width="88px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Close_DT"
                FilterControlAltText="Filter column column" HeaderText="Actual Close<br />Date & Time"
                UniqueName="Close_DT"  HeaderStyle-Width="88px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="act_overall_due_status"
                FilterControlAltText="Filter column column" HeaderText="Close<br />Status"
                UniqueName="CloseStat">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
    </HeaderContextMenu>
</telerik:RadGrid>

I am using the latest versoin of the software and I am observing this anomally in IE8.

[Pavlina]

Hello,

To avoid this erroneous behavior, you could use the following CSS class:

<style type="text/css">
       div.RadGrid_Windows7 th.rgSorted
       {
           background-image: none;
       }
   </style>

Give it a try and let me know if other questions arise.

Best wishes,
Pavlina
the Telerik team

[SSirica]

Thank you that worked perfect!  Now can you work your magic on a selected row that's doing the same type of thing.  I've attached a sample.

[Pavlina]

Hi SSirica,

Please refer to the code library below for more information about how to find out the original RadGrid selected row background:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-preserve-the-original-radgrid-selected-hover-row-background-when-using-itemstyle-backcolor.aspx

I hope this helps.

All the best,
Pavlina
the Telerik team