RadCombo setting alternate row style via skin

[Manisha Shivjiani]

Hi,
Can you please let me know the way to set the alternate row styling for telerik radcombobox ?

I saw following thread which suggest using databound and setting the classes. I would want it to default it via Skin or some other way so that I don't have to worry about writing these lines of code for each and every combobox.

http://www.telerik.com/community/forums/aspnet-ajax/combobox/creating-alternate-row-background-colors.aspx


Thanks,
Manisha

[Boyan Dimitrov]

Hello,

I am afraid that our RadComboBox control does not have built in functionality for setting alternate row styling, but I would recommend an alternative way of achieving that appearance effect.
An easy and convenient way would be to use css style in order to set background color to all even or odd items to all RadComboBox controls on the page.
//css

<style type="text/css">
       html .RadComboBoxDropDown .rcbItem:nth-child(even) {background: #CCC}
       html .RadComboBoxDropDown .rcbHovered:nth-child(even) {background: #999}
   </style>

Additionally you are able to modify that effect for different skins by simply adding its name to .RadComboBoxDropDown selector as shown in the code snippet below:

<style type="text/css">
       html .RadComboBoxDropDown_Windows7 .rcbItem:nth-child(even) {background: #CCC}
       html .RadComboBoxDropDown .rcbItem:nth-child(even) {background: #000}
      ....
   </style>

Regards,
Boyan Dimitrov
the Telerik team

[Manisha Shivjiani]

Hi,
Thanks for the reply. This is exactly what I was looking for.
Unfortunately this nth-child selector does not work in IE 8 and I require something for IE 8.
Thanks,
Manisha

[Boyan Dimitrov]

Hello,

Indeed the css :nth-child() selector is not working under IE8.
I would recommend using jQuery in order to apply custom classes with some predefined rules in order to make that appearance effect working under IE8:
//markup code

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientLoad="ClientLoad">
    <Items>
     ...........
    </Items>
</telerik:RadComboBox>

//JavaScript

function ClientLoad(sender) {
    var $ = $telerik.$;
    $(".rcbList .rcbItem:nth-child(even)").addClass("customClass")
    $(".rcbList rcbHovered:nth-child(even)").addClass("customClassHovered")
}

//css

<style type="text/css">
    .customClass {background: #CCC}
    .customClassHovered {background: #999}
</style>

Regards,
Boyan Dimitrov
the Telerik team