New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

Horizontal Scroll:
  • TELERIK BLOGS: RadRotator binding to XML data
  • TELERIK BLOGS: Telerik TV Launches Episode 3
  • TELERIK BLOGS: Accessibility and RadEditor
    
Vertical Scroll:
  • TELERIK BLOGS: RadRotator binding to XML data
  • TELERIK BLOGS: Telerik TV Launches Episode 3
  • TELERIK BLOGS: Accessibility and RadEditor
    

Like all Telerik controls, the rotator has a rich client API. It has many client side functions which allow the developer to achieve their goal. This example illustrates how to use the FromCode rotator type. Here are the API functions we use

  • showNext(direction) - scrolls the rotator in the specified direction and shows the next frame. The direction parameter must be of type Telerik.Web.UI.RotatorScrollDirection.
  • get_frameDuration() - gets the currentrotator frame duration
  • DefaultCS.aspx
  • scripts.js
  • styles.css
  • news.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <span class="title">Horizontal Scroll:</span>
        <div class="rotatatorLeftRightBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorHorizontal" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                Height="60px" Width="250px" ItemHeight="60px" ItemWidth="250px" RotatorType="FromCode"
                                ScrollDirection="Left" CssClass="floatRotator" OnClientLoad="horizontalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationHorizontal" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'horizontalRotator'); return false;"
                       class="stopSelected" title="Stop">
                        <span>Stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="start" title="Start">
                        <span>Start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="left" title="Left">
                        <span>Up</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                       class="right" title="Right">
                        <span>Down</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-container size-narrow">
        <span class="title">Vertical Scroll:</span>
        <div class="rotatatorUpDownBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorVertical" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                RotatorType="FromCode" Height="40px" Width="250px" ItemHeight="40px" ItemWidth="250px"
                                ScrollDirection="Up" CssClass="floatRotator" OnClientLoad="verticalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationVertical" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'verticalRotator'); return false;"
                       class="stopSelected" title="stop">
                        <span>stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="start" title="start">
                        <span>start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Down); return false;"
                       class="down" title="down">
                        <span>down</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="up" title="up">
                        <span>up</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="news.xml"></asp:XmlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance