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
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
0
Accepted
Hi Jay,
Here is a small sample that shows the approach that we recommend - I hope it will help:
Sincerely yours,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.
Thanks so much for your help.
<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
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.
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
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:
Thanks
Princy
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
>
Princy