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

Add CSS class on client click?

6 Answers 692 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 2
Jay asked on 17 Aug 2008, 10:16 PM
I have an image gallery setup using a Rotator control.  I'd like to add/remove a "seleccted" CSS class to highlight the currently selected image in my strip of thumbnails.

The documentation shows that I can add an OnClientItemClicked JavaScript event which I should be able to use to handle this.  I need to get the currently clicked item which should be something like args.get_item().  Is there a list somewhere of properties and methods of the args and sender items?  The documentation seems to only show the event names.

Any help would be appreciated.

Thanks

6 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Tunev
Telerik team
answered on 20 Aug 2008, 11:56 AM
Hi Jay,

Here is a small sample that shows the approach that we recommend - I hope it will help:

<head runat="server"
    <title>Untitled Page</title> 
    <style type="text/css"
   .rotatorItemColor 
    { 
        background-color:red; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="ScriptManager1" runat="server"
        </telerik:RadScriptManager> 
         
        <script type="text/javascript"
        var currentItem; 
        function itemClicked_handler(sender, args) 
        { 
            currentItem = args.get_item(); 
            currentItem.addCssClass("rotatorItemColor"); 
        } 
         
        function itemShowing_handler(sender,args) 
        { 
            currentItem.removeCssClass("rotatorItemColor"); 
        } 
         
        </script> 
         
        <telerik:RadRotator  
            OnClientItemClicked="itemClicked_handler"  
            OnClientItemShowing="itemShowing_handler" 
            ID="RadRotator1"  
            Width="305px"  
            Height="114px"  
            RotatorType="ButtonsOver" 
            ScrollDirection="Down, Up"  
            DataSourceID="AccessDataSource1"  
            runat="server" 
            ItemWidth="305px" 
            ItemHeight="74px" 
            > 
            <ItemTemplate> 
 
                <%# DataBinder.Eval(Container.DataItem, "ProductName")%> 
 
            </ItemTemplate> 
        </telerik:RadRotator> 
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
            SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Alphabetical List of Products]"
        </asp:AccessDataSource> 
    </form> 
</body> 
</html> 



Sincerely yours,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Jay
Top achievements
Rank 2
answered on 20 Aug 2008, 07:37 PM
I'm using my Rotator control as navigation for an image gallery so I simplified your example into just using one event handler to remove the CSS class from the current and then add it to the new one.

<script type="text/javascript"
    var currentItem; 
    function itemClicked_handler(sender, args) { 
        if (currentItem) currentItem.removeCssClass("selected");   
        currentItem = args.get_item(); 
        currentItem.addCssClass("selected");   
    }   
</script> 


Thanks so much for your help.
0
Stephen
Top achievements
Rank 1
answered on 28 Mar 2009, 12:44 AM
Is there a way to do this server side through the ItemClick event?  I'd like to access the html content within the ItemTemplate and place a border around it.

Any help on this would be greatly appreciated.


Thanks,
Stephen

0
Fiko
Telerik team
answered on 31 Mar 2009, 01:32 PM
Hi Stephen,

I have implemented a demo project with the desired functionality and have attached it to this thread.

I hope this helps.

All the best,
Fiko
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jaime
Top achievements
Rank 1
answered on 19 Feb 2013, 03:21 PM
How can I use this same sample but on the client side using javascript to set CssClass values when the left or right buttons are clicked? I'm using custom buttons and would like to set the rrdisabled property when a user clicks an arrow and the last items has been reached.

Thanks,

Jaime
0
Princy
Top achievements
Rank 2
answered on 21 Feb 2013, 05:40 AM
Hello Jaime

The WrapFrames="false" setting  will cause the RadRotator control to stop when it reaches the last item.
aspx:
<telerik:RadRotator ID="RadRotator1" runat="server" WrapFrames="false">
</telerik:RadRotator>
Thanks
Princy
Tags
Rotator
Asked by
Jay
Top achievements
Rank 2
Answers by
Georgi Tunev
Telerik team
Jay
Top achievements
Rank 2
Stephen
Top achievements
Rank 1
Fiko
Telerik team
Jaime
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or