This is a migrated thread and some comments may be shown as answers.

Setting a cssclass on a clicked item

1 Answer 21 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
sitefinitysteve
Top achievements
Rank 2
Veteran
sitefinitysteve asked on 18 May 2010, 03:09 PM
I'm my serverside code I'm setting a css class on a label item in the radrotator

So then OnClientItemClicked I clear the class from the item, but how the heck do I put that class onto the new item I clicked?

Thanks,
Steve

1 Answer, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
answered on 20 May 2010, 03:05 PM
Hi Steve,

I created for you a simple example which adds a custom css class to the currently clicked element, and removes the css from the previously clicked element. Here it is the code:
ASPX:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
    <style type="text/css">
        .CustomStyle span
        {
            color: Red !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <script type="text/javascript">
        var previousElement;
        function RotatorItemClick(rotator, args)
        {
            var item = args.get_item();
            var index = item.get_index();
            var itemElement = item.get_element();
            Sys.UI.DomElement.addCssClass(itemElement, "CustomStyle");
            if (previousElement != null)
            {
                Sys.UI.DomElement.removeCssClass(previousElement, "CustomStyle");
            }
            previousElement = itemElement;
  
        }
    </script>
    <div>
                <telerik:RadRotator ID="RadRotator1" runat="server" Width="80px" Height="20px"
                     ScrollDuration="500" FrameDuration="2000" ItemHeight="30" ItemWidth="30"
                     OnClientItemClicked="RotatorItemClick">
                </telerik:RadRotator>
    </div>
    </form>
</body>
</html>
Codebehind:
protected override void CreateChildControls()
   {
       string[] months = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
       foreach(string month in months)
       {
           RadRotatorItem rotatorItem = new RadRotatorItem();
           RadRotator1.Items.Add(rotatorItem);
           Label lbl = new Label();
           lbl.Text = month;
           rotatorItem.Controls.Add(lbl);
       }
   }

Let us know if you have any other questions.

Sincerely yours,
Petio Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Rotator
Asked by
sitefinitysteve
Top achievements
Rank 2
Veteran
Answers by
Petio Petkov
Telerik team
Share this question
or