Styling Items.

2 posts, 1 answers
  1. Saravanan
    Saravanan avatar
    26 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2013 Link to this post

    Hi,

    How to give alternate background color to the RadCombobox dropdown list items? 

    Thank you,
    Saravanan.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Mar 2013 Link to this post

    Hi Saravanan,

    Please have a look into the sample code I tried at my end. You can attach the OnLoad server side event and based on the index of the item you can give distinct CSS class.

    <telerik:RadComboBox ID="RadComboBox" runat="server" OnLoad="RadComboBox_Load">
        <Items>
            <telerik:RadComboBoxItem Text="Audi" />
            <telerik:RadComboBoxItem Text="Ferrari" />
            <telerik:RadComboBoxItem Text="Porsche" />
            <telerik:RadComboBoxItem Text="BMW" />
            <telerik:RadComboBoxItem Text="Toyota" />
            <telerik:RadComboBoxItem Text="Volkswagen" />
        </Items>
    </telerik:RadComboBox>

    C#:
    protected void RadComboBox_Load(object sender, EventArgs e)
    {
        foreach (RadComboBoxItem Items in RadComboBox.Items)
        {
            if (Items.Index % 2 == 0)
                Items.CssClass = "comboBoxListItem";
            else
                Items.CssClass = "alternatingComboBoxListItem";
        }
    }

    CSS:
    <style type="text/css">
        .comboBoxListItem
        {
            background-color: #C9F1FA;
        }    
        .alternatingComboBoxListItem
        {
            background-color: #FFF;
        }
    </style>

    Thanks,
    Princy.
Back to Top