RadCombo setting alternate row style via skin

4 posts, 0 answers
  1. Manisha Shivjiani
    Manisha Shivjiani avatar
    24 posts
    Member since:
    Nov 2009

    Posted 07 Feb 2013 Link to this post


    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
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 12 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Manisha Shivjiani
    Manisha Shivjiani avatar
    24 posts
    Member since:
    Nov 2009

    Posted 12 Feb 2013 Link to this post

    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
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 15 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top