Column Headers and their sorted apperance

4 posts, 1 answers
  1. SSirica
    SSirica avatar
    50 posts
    Member since:
    Jan 2007

    Posted 02 Feb 2011 Link to this post

    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.
    <telerik:RadGrid ID="rgResults" runat="server" Width="98%"
        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.
  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SSirica
    SSirica avatar
    50 posts
    Member since:
    Jan 2007

    Posted 02 Feb 2011 Link to this post

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

    Posted 03 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top