This is a migrated thread and some comments may be shown as answers.

radgrid alternate row color style

4 Answers 1087 Views
Grid
This is a migrated thread and some comments may be shown as answers.
prayag ganoje
Top achievements
Rank 1
prayag ganoje asked on 25 Apr 2011, 08:49 PM
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.

4 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 28 Apr 2011, 04:09 PM
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

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.

0
prayag ganoje
Top achievements
Rank 1
answered on 04 May 2011, 07:24 PM
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;
}
0
Galin
Telerik team
answered on 09 May 2011, 04:46 PM
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

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.

0
JeffSM
Top achievements
Rank 2
Veteran
Iron
Iron
answered on 19 Nov 2022, 04:42 PM
Would be better a native solution like a property to RadGrid called "AlternateRowColor=true" using the theme color of the Skin.
Rumen
Telerik team
commented on 23 Nov 2022, 08:01 AM

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.
Tags
Grid
Asked by
prayag ganoje
Top achievements
Rank 1
Answers by
Galin
Telerik team
prayag ganoje
Top achievements
Rank 1
JeffSM
Top achievements
Rank 2
Veteran
Iron
Iron
Share this question
or