How to Set Alternate Row Background Color for RadRadioButtonList
Environment
Product | Progress® Telerik® UI for ASP.NET AJAX |
Description
RadRadioButtonList is a popular control used in ASP.Net WebForms for displaying options in a list format. However, users may face difficulty in customizing the control to set alternate row background colors. This article provides a step-by-step guide to help users set alternate row background color for RadRadioButtonList control using CSS styles.
Solution
To set alternate row background color for RadRadioButtonList control, follow these steps:
Set the RenderMode property of the RadRadioButtonList control to Lightweight. This will allow you to use CSS styles to customize the control.
<telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" RenderMode="Lightweight">
<Items>
<telerik:ButtonListItem Text="Option 1" Value="1" />
<telerik:ButtonListItem Text="Option 2" Value="2" />
<telerik:ButtonListItem Text="Option 3" Value="3" />
<telerik:ButtonListItem Text="Option 4" Value="4" />
</Items>
</telerik:RadRadioButtonList>
Define CSS styles for the RadRadioButtonList control. Use the nth-child CSS pseudo-class to select alternate elements of the control and apply different background colors to them.
<style>
.RadRadioButton:nth-child(odd) {
background-color: #f5f5f5 !important;
}
.RadRadioButton:nth-child(even) {
background-color: #ffffff !important;
}
</style>
In the above example, the odd-numbered items of the RadRadioButtonList control will have a light gray background color, while the even-numbered items will have a white background color.
By following these simple steps, users can easily customize the RadRadioButtonList control and set alternate row background colors.