[Solved] Grid loses background color while sorting

[Jayanthy Kapistalam]

I've specified back ground color for my grid rows based on the text in one of the columns. The issue I'm facing is the background color disappears and becomes white when I sort the column. This happens only in IE 6 and not in the higher versions. Here is the item databound event and the grid definition. Note: I populate the grid using "need datasource event".

 <telerik:RadGrid ID="glBabies"                     
                     runat="server"
                     AllowSorting="True"
                     AutoGenerateColumns="False"
                     EnableAjax="true"
                     GridLines="None"
                     AllowPaging="False"                                        
                     onneeddatasource="glBabies_NeedDataSource"
                     OnItemDataBound="glBabies_ItemDataBound"
                    >
            <ExportSettings ExportOnlyData="true" IgnorePaging="false" OpenInNewWindow="true"  FileName="Tribune Export" />         
            <MasterTableView Width="100%" DataKeyNames="PortraidID" AutoGenerateColumns="False">
                        <columns>    
                        <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
                            <HeaderTemplate>
                             <asp:CheckBox id="headerChkbox" OnCheckedChanged="ToggleSelectedState" AutoPostBack="True" runat="server"></asp:CheckBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox id="CheckBox1" OnCheckedChanged="ToggleRowSelection"  runat="server"></asp:CheckBox>
                            </ItemTemplate>
                            <ItemStyle Width="10px" />
                        </telerik:GridTemplateColumn>                                                    
                            <telerik:GridBoundColumn DataField="PortraidID" HeaderText="Portrait ID" SortExpression="PortraidID" UniqueName="PortraidID" >
                                <HeaderStyle Width="10px" />
                                <ItemStyle HorizontalAlign="Left" />
                                <ItemStyle Width="10px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FirstName" HeaderText="Name" SortExpression="FirstName" UniqueName="FirstName">
                            <HeaderStyle Width="75px" /><ItemStyle HorizontalAlign="left" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="MotherFN" HeaderText="Parents" SortExpression="MotherFN" UniqueName="Parents">
                             <HeaderStyle Width="125px" /><ItemStyle HorizontalAlign="Left" />
                            </telerik:GridBoundColumn>    
                             <telerik:GridBoundColumn DataField="Weight" HeaderText="Weight" SortExpression="Weight" UniqueName="Weight">
                            <HeaderStyle Width="75px" /><ItemStyle HorizontalAlign="Left" />
                            </telerik:GridBoundColumn>    
                            <telerik:GridBoundColumn DataField="Date" HeaderText="Date" SortExpression="Date" UniqueName="Date" DataType="System.DateTime" >
                            <HeaderStyle Width="75px" /><ItemStyle HorizontalAlign="Left" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Sex" HeaderText="Sex" SortExpression="Sex" UniqueName="Sex" Display="false"></telerik:GridBoundColumn>    
                            <telerik:GridBoundColumn DataField="FatherFN" SortExpression="FatherFN" UniqueName="FatherFN" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="MiddleName" SortExpression="MiddleName" UniqueName="MiddleName" Display="false"></telerik:GridBoundColumn>        
                        </columns>
                    </MasterTableView>
    </telerik:RadGrid>

Code behind:



protected void glBabies_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            if (e.Item.Cells[10].Text != "" && e.Item.Cells[10].Text != "&nbsp;")
                e.Item.Cells[4].Text = e.Item.Cells[4].Text + " " + e.Item.Cells[10].Text;
            if (e.Item.Cells[8].Text == "Female")
            {
                e.Item.BackColor = System.Drawing.ColorTranslator.FromHtml("#fdebfb");
                if (e.Item.Cells[9].Text != "" && e.Item.Cells[9].Text != "&nbsp;")
                    e.Item.Cells[5].Text = "Daughter of " + e.Item.Cells[5].Text + " & " + e.Item.Cells[9].Text;
                else
                    e.Item.Cells[5].Text = "Daughter of " + e.Item.Cells[5].Text;
            }
            else
            {
                e.Item.BackColor = System.Drawing.ColorTranslator.FromHtml("#dfe7fa");
                if (e.Item.Cells[9].Text != "" && e.Item.Cells[9].Text != "&nbsp;")
                    e.Item.Cells[5].Text = "Son of " + e.Item.Cells[5].Text + " & " + e.Item.Cells[9].Text;
                else
                    e.Item.Cells[5].Text = "Son of " + e.Item.Cells[5].Text;
            }
        }
    }

[Princy]

Hi Jayanthy,

In the above given code I can see that you are accessing cells using the cell index. Can you try accessing the Grid cells using the column's UniqueName property and see whether it is working while sorting.

You may go through the following help article which explains how to access Grid cells using column's UniqueName property.
Accessing cells and rows

Thanks
Princy

[Jayanthy Kapistalam]

I tried it out. Still the background color becomes white in IE 6.

[Dimo]

Hello Jayanthy,

By default RadGrid displays a special sort style for the sorted columns. The sort background depends on the skin.

If you want to disable this functionality, please set

<telerik:RadGrid>
       <SortingSettings EnableSkinSortStyles="false" />
</telerik:RadGrid>


I am surprised that you are seeing the issue in IE6 - the behavior is the same in all browsers.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.