Events Overview
RadRotator provides the following client-side events:
OnClientLoad - fires after the RadRotator loads on the page.
OnClientItemClicked - fires when an item of the RadRotator control is clicked.
OnClientItemClicking - fires when an item of the the RadRotator control is clicked, immediately after the mouse button is released. It can be canceled.
OnClientItemShowing - fires when an item of the RadRotator control is about to be shown. It can be canceled.
OnClientItemShown - fires when an item of the RadRotator control is shown.
OnClientItemsRequested - fires when the items of the control are successfully loaded on demand.
OnClientItemsRequestFailed - fires when the request for loading items on demand fails.
OnClientItemsRequesting - fires before the items of the control are loaded on demand.
OnClientMouseOut - fires when the mouse pointer leaves the control.
OnClientMouseOver - fires when the user moves the mouse pointer over the control.
The event handler method for any of the events can be set on the server and on the client.
Server-side
To handle the desired event, the user must set the respective property to the name of the JavaScript function handling the event. Here is an example:
<script type="text/javascript">
function OnClientItemClicked(sender, eventArgs) {
alert("RadRotator was clicked.");
}
</script>
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" ScrollDirection="Left" Height="113px"
ItemHeight="113px" Width="150px" ItemWidth="150px" OnClientItemClicked="OnClientItemClicked">
<ItemTemplate>
<img src=".........." alt="" />
</ItemTemplate>
</telerik:RadRotator>
Client-side
To handle the desired event, the user should use the respective add_
<script type="text/javascript">
function Click(rotator, args) {
alert("Rotator was clicked");
}
function pageLoad() {
var rotator = $find("<%=RadRotator1.ClientID %>");
rotator.add_itemClicked(Click);
}
</script>
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" ScrollDirection="Left" Height="113px"
ItemHeight="113px" Width="150px" ItemWidth="150px">
<ItemTemplate>
<img src=".........." alt="" />
</ItemTemplate>
</telerik:RadRotator>