Creating alternate row background colors

[Online .Net Developers]

I would like to style the combobox dropdown field to mimic the alternate row colors of a grid (i.e. each line alternating between white and light grey). Is this possible?

[Serrin]

Hey Devs,

This is a kinda simple example which populates a combo with ten items, but it provides a new backcolor for even rows:

    protected void MakeCombo_Click(object sender, EventArgs e)
    {
        for (int x = 0; x < 10; x++)
        {
            RadComboBoxItem rcbi = new RadComboBoxItem();
            rcbi.Text = "Item " + x.ToString();
            rcbi.Value = "Item" + x.ToString();
            if (x % 2 == 0)
                rcbi.BackColor = Color.LightGray;
            RadCombo1.Items.Add(rcbi);
        }
    }

In theory you could use the same kinda logic after it's been databound (i.e., foreach RadComboItem b in RadCombo1.Items), just using it's position in the list to add a little color.

[Online .Net Developers]

Hi, thanks for the helpful reply.

We were hoping there would be a solution using styles and skinning. Is there a way to modify the CSS to create the alternating row colors?

Thanks again

[Atanas Korchev]

Hi Online .Net Developers,

RadComboBox does not have built-in support for alternating items in the skins.

All the best,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Online .Net Developers]

Thanks for the help. We'd like to suggest this type of modification be incorporated in future releases.

[Jon Shipman]

Here's some code based on Serrin's suggestion.  However if you use the CssClass instead of the BackColor property the user will retain the highlighted/hover color.

ASPX

<telerik:RadComboBox ID="RadComboBox1"
    runat="server"
    ondatabound="RadComboBox1_DataBound">
</telerik:RadComboBox>

C#

    protected void RadComboBox1_DataBound(object sender, EventArgs e)
    {
        foreach (RadComboBoxItem rcbi in RadComboBox1.Items)
        {
            if (rcbi.Index % 2 == 0)
                rcbi.CssClass = "comboBoxListItem";
            else
                rcbi.CssClass = "alternatingComboBoxListItem";
        }
    }

CSS

.comboBoxListItem
{
    background-color: #C9F1FA;
}

.alternatingComboBoxListItem
{
    background-color: #FFF;
}

[Guy]

You can also do it in the ItemDataBound event, then you don't have to itterate (VB.Net code ...)

If e.Item.Index Mod 2 = 0 Then
e.Item.CssClass = "comboBoxListItem"
Else
e.Item.CssClass = "alternatingComboBoxListItem"
End If

[Keith Blackman]

I have successfully used Guy's example on a statically created RadComboBox but am struggling to do the same for a dynamically created one. I have successfully added an event handler for the SelectedIndexChanged event but I am struggling with adding one to the ItemDataBound event.

When I create the RadComboBox dynamically I add a handler for the SelectedIndexChanged event like this

AddHandler MyRadComboBox(intRow).SelectedIndexChanged, AddressOf MyRadComboBoxSelectedIndexChanged

My sub  is:

Private Sub MyRadComboBoxSelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs)

So for the ItemDataBound event I feel I should add the handler like this:

AddHandler MyRadComboBox(intRow).ItemDataBound, AddressOf MyRadComboBoxItemDataBoundAlternateShading

and create a sub like this:

Private Sub MyRadComboBoxItemDataBoundAlternateShading(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBox????????)

        If e.Index Mod 2 = 0 Then
            e.CssClass = "RadComboBoxListItem"
        Else
            e.CssClass = "RadComboBoxListItemAlternate"
        End If
    End Sub

But I can't find the desired event (the question marks).

Do I need a different approach for this?

 

[Dimitar]

Hi,

The event arguments type is RadComboBoxItemEventArgs, as specified in the ItemDataBound help article.

Regards,
Dimitar
Telerik