radgrid alternate row color style

[prayag ganoje]

Hello,

I am using telerik latest relase build. I want to change the radgrid alternate row colors but there no change even though I changed the properties as suggested in the demo.

<telerik:RadGrid ID="rg_CSMD_Backlog_By_Status_FL" runat="server" AllowPaging="false" PageSize="15"
                AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
                OnNeedDataSource="rg_CSMD_Backlog_By_Status_FL_NeedDataSource" BorderColor="White"
                BorderStyle="None" Height="99.9%" Width="99.9%" OnItemDataBound="rg_CSMD_Backlog_By_Status_FL_ItemDataBound"
                OnItemCommand="rg_CSMD_Backlog_By_Status_FL_ItemCommand" ShowGroupPanel="false" ShowFooter="false">
                <AlternatingItemStyle BackColor="AliceBlue" />
                <AlternatingItemStyle BorderWidth="1px" />
                <ItemStyle BackColor="White" />
                <ItemStyle BorderWidth="1px" />
                <MasterTableView CommandItemDisplay="None" DataKeyNames="OWNER" GroupLoadMode="Client">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="GroupBy" FieldName="GroupBy" />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="GroupBy" SortOrder="Descending" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="OWNER" HeaderText="OWNER" DataFormatString="<nobr>{0}</nobr>"
                            HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="X-Small" HeaderStyle-Width="50%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn Aggregate="Sum" DataField="CASES" HeaderText="CASES" DataFormatString="<nobr>{0}</nobr>"
                            HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="X-Small">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="AGING" HeaderText="AGING" DataFormatString="<nobr>{0}</nobr>"
                            HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="X-Small">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <PagerStyle Mode="NextPrev"></PagerStyle>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" AllowGroupExpandCollapse="true">
                    <Resizing AllowColumnResize="true" />
                    <Selecting AllowRowSelect="true" />
                    <Scrolling AllowScroll="false" UseStaticHeaders="true" />
                </ClientSettings>
            </telerik:RadGrid>

I want set the style in mush more detail. May be using some CSS class will be helpful.

[Galin]

Hello Prayag,

I strongly recommend that you avoid setting the background and other styles with markup attributes when it is possible to do it with CSS. This way is obsolete and will have negative effect on the performance.

For example the alternate rows have CSS class rgAltRow, so style them and their cells this way:

Copy Code

div.RadGrid .rgAltRow

{

   background: AliceBlue;


   color: #f00;


}

div.RadGrid .rgAltRow td


{

   border-color: #f00;


}

Also you can style the selected and hovered rows:

Copy Code

div.RadGrid .rgSelectedRow

{

   background: green;

}



div.RadGrid .rgHoveredRow

{

   background: red;

}

Please take a look at this blog post how to override default styles:
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

Also I highly recommend you to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their CSS rules.


All the best,
Galin
the Telerik team

[prayag ganoje]

Thanks for the reply. Alternate row color CSS is working perfect.

But following css are not making any effect:

div.RadGrid .rgSelectedRow
{
   background: Gray;
}

div.RadGrid .rgHoveredRow
{
   background: #FFFFE1;
}

[Galin]

Hi Prayag,

The Css code snippet in the previous post is working for the default styles of RadGrid. If you have added different CSS rules with bigger specify you have to override them. Also please take a look at the guide in my  previous post.

If this does not help, could you please give us more details on what you are trying to achieve or send us a small running project that we can use to reproduce the case.

Kind regards,
Galin
the Telerik team

[JeffSM]

Would be better a native solution like a property to RadGrid called "AlternateRowColor=true" using the theme color of the Skin.

[Rumen]

Thank you for sharing your idea, Jefferson! Yes, it might be useful in such scenarios, but it will also make the RadGrid configuration even steeper to learn, because of the rich API the control provides. Nevertheless, feel free to file a feature request in the AJAX portal to see how many developers will vote for it.