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 150×113, so if different sizes are being utilized you should change the properties Width, Height, ItemWidth, ItemHeight accordingly.