How to change the background color of radrotator selected item

5 posts, 0 answers
  1. mahesh
    mahesh avatar
    14 posts
    Member since:
    Jun 2011

    Posted 31 Oct 2011 Link to this post

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

    Thanks,
    Mahesh
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Oct 2011 Link to this post

    Hello Mahesh,

    You can try the following code snippet.

    C#:
    protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
    {
      RadRotatorItem item = (RadRotatorItem)e.Item;
      item.CssClass = "cssitem";
    }

    CSS:
    <style type="text/css">
    .cssitem
     {
      color:Red;
     }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mahesh
    mahesh avatar
    14 posts
    Member since:
    Jun 2011

    Posted 31 Oct 2011 Link to this post

    Hi Princy,
    Thanks for the reply, even after trying your suggestion i am not able to  set the border color for selected rotator item, can you please help on this.

    Thanks,
    Mahesh
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 01 Nov 2011 Link to this post

    Hi Mahesh,

    Basically, you can utilize CSS in order to configure the border of the RadRotator control and its items. The following steps will help you achieve the desired effect:
    1. The internal CSS class rrClipRegion can be overridden in order to set a new color for the rotator control's border.
    2. The color of the item's borders can be specified via some additional CSS classes and the property CssClass of every RadRotator's item.

    The approach, suggested above, is demonstrated in the attached sample page. You can use it as a reference for incorporating the solution into your actual project.

    Regards,
    Slav
    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
  6. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 04 Mar in reply to Slav Link to this post

    hi,

    i have some task which is similar to this.

    i binded data to radrotator from code behind. now i have to highlight the item when i mouseovere. it should happen in client side only.

    i tried by applying css to item OnClientMouseOver event. but it is not working..

    here is my code

    javascript:

    function employeeMouseOver(sender, eventArgs) {                    
                        eventArgs.get_item()._cssClass = "rrHover";
                    }

    css:

     .rrHover {
                background-color: pink !important;
            }

    aspx:

    <telerik:RadRotator RenderMode="Lightweight" ID="thumbRotator" runat="server" Skin="Silk" RotatorType="ButtonsOver" Width="1280px" BackColor="White"
                                                Height="104px" ItemHeight="95" ItemWidth="95" FrameDuration="1" ScrollDirection="Left,Right" AutoPostBack="false"
                                                OnClientItemClicked="ChartItemClicked" OnClientMouseOver="employeeMouseOver">
                                                <ItemTemplate>
                                                    <telerik:RadLabel runat="server" ID="lbl_imageInfo"></telerik:RadLabel>
                                                </ItemTemplate>
                                                <ControlButtons LeftButtonID="img_left" RightButtonID="img_right"></ControlButtons>
                                            </telerik:RadRotator>

    aspx.cs

    for (int i = 0; i < rotatorData.Rows.Count; i++)
                {
                    RadRotatorItem item1 = new RadRotatorItem();
                    HtmlGenericControl div = new HtmlGenericControl("div");
                    item1.Controls.Add(div);
                    string imgname = rotatorData.Rows[i][1].ToString().Trim();
                    HtmlGenericControl img = new HtmlGenericControl("img");
                    div.Controls.Add(img);                
                    img.Attributes.Add("src", "Images/" + imgname + ".png");
                    item1.ToolTip = imgname;
                    item1.Attributes.Add("Value", imgname); 
                    thumbRotator.Items.Add(item1);                               
                    RadRotator RW_radrotator = (RadRotator)FindControl("thumbRotator");
                    RadLabel lbl = (RadLabel)item1.FindControl("lbl_imageInfo");
                    lbl.Text = imgname;
                }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017