How to change the background color of telerik radrotator selected item

Question

I am using radrotator in my application , how can i change the border color or color of the rotator selected item from asp.net c# code behind , can i expect some help on this.

Answer 1

You can change the border of the RadRotator control and its items via additional CSS classes:

1. The internal CSS class rrClipRegion can be overridden in order to set a new color for the rotator control's border:

   .rrClipRegion
   {
       border: 1px solid green !important;
   }
   

2. You can set a default border color for the RadRotator's items via CSS and then you can change it from the code behind by defining a CSS class with new border color, as shown below:

The RadRotator markup:

    <telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" ScrollDirection="Left"
        Height="123px" ItemHeight="113px" Width="180px" ItemWidth="152px" Skin="Default"
        RotatorType="Buttons" OnItemClick="RadRotator1_ItemClick">
        <ItemTemplate>
            <div>
                <img src="....." alt="" />
            </div>
        </ItemTemplate>
    </telerik:RadRotator>

The styles, needed for applying the borders:

<style type="text/css">
    .rrItem
    {
        margin: 4px;
    }

    .rrItem img
    {
        border: 1px solid grey;
    }

    .cssSelectedItem img
    {
        border: 1px solid red;

    }
</style>

Changing the item's border color from the code-behind:

protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
{
    RadRotatorItem item = (RadRotatorItem)e.Item;
    item.CssClass = "cssSelectedItem";

    RadRotator1.InitialItemIndex = e.Item.Index;
}

Note that I have set the InitialItemIndex property of the rotator control in order to preserve the current item through postback. Also, the example is designed for images with size 150x113, so if different sizes are being utilized you should change the properties Width, Height, ItemWidth, ItemHeight accordingly.