Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Rotator / Client-side API

Horizontal Scroll:
  • TURKEY: Stocks go up after a surge in investor confidence
  • ROMANIA: Privatization drives the stock market this week
  • BULGARIA: Government plans for a new wave of privatization
    
Vertical Scroll:
  • TURKEY: Stocks go up after a surge in investor confidence
  • ROMANIA: Privatization drives the stock market this week
  • BULGARIA: Government plans for a new wave of privatization
    

  • Client-Side Methods

    Like all RadControls, 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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.ClientAPIControl.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" Language="C#" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
            .itemTemplate
            {
                width: 250px;
                height: 40px;
            }
            .rotatatorLeftRightBack, .rotatatorUpDownBack
            {
                float: left;
                background-image: url('IMAGES/back.gif');
                background-repeat: no-repeat;
                padding-left: 30px;
                padding-top: 20px;
                width: 407px;
                height: 43px;
            }
            .floatRotator
            {
                float: left;
                margin-top: -5px;
            }
            .start, .stop, .left, .right, .up, .down, .startSelected, .stopSelected
            {
                width: 20px;
                height: 20px;
                display: block;
                cursor: hand;
                outline: none;
            }
            #navigationHorizontal .start, #navigationHorizontal .stop, .left, .right, #navigationHorizontal .startSelected, #navigationHorizontal .stopSelected
            {
                background-image: url('IMAGES/HorizontalButtons.gif');
            }
            #navigationVertical .start, #navigationVertical .stop, .up, .down, #navigationVertical .stopSelected, #navigationVertical .startSelected
            {
                background-image: url('IMAGES/VerticalButtons.gif');
            }
            .start span, .stop span, .left span, .right span, .down span, .up span, .stopSelected span, .startSelected span
            {
                width: 20px;
                height: 20px;
                display: block;
                text-indent: -500000px;
            }
            .stopSelected
            {
                background-position: 0px -25px;
            }
            .startSelected
            {
                background-position: -25px -25px;
            }
            .stop
            {
                background-position: 0px 0px;
            }
            .start
            {
                background-position: -25px 0px;
            }
            .left
            {
                background-position: -50px 0px;
            }
            .right
            {
                background-position: -75px 0px;
            }
            .down
            {
                background-position: -50px 0px;
            }
            .up
            {
                background-position: -75px 0px;
            }
            /* Hovers */.stop:hover
            {
                background-position: 0px -25px;
            }
            .start:hover
            {
                background-position: -25px -25px;
            }
            .stop:hover
            {
                background-position: 0px -25px;
            }
            .left:hover
            {
                background-position: -50px -25px;
            }
            .right:hover
            {
                background-position: -75px -25px;
            }
            .down:hover
            {
                background-position: -50px -25px;
            }
            .up:hover
            {
                background-position: -75px -25px;
            }
            .commandsWrapper, .commandsWrapper li
            {
                float: left;
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
                height: auto;
                display: block;
                zoom: 1;
            }
                    
            .commandsWrapper
            {
                width: 136px;
                height: 20px;
                padding: 2px 0 0 10px;
            }
            .commandsWrapper li
            {
                margin-right: 14px;
                _margin-right: 13px;/* START IE6 hack */
            }
            .commandsWrapper ul:after
            {
                content: "";
                display: block;
                height: 0;
                overflow: hidden;
                line-height: 0;
                font-size: 0;
                clear: both;
                visibility: hidden;
            }
            .title
            {
                font-size: 20px;
                margin-bottom: 15px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div style="width: 885px;">
            <div style="float: left; width: 437px; position: relative;">
                <span class="title">Horizontal Scroll:</span>
                <div class="rotatatorLeftRightBack">
                    <telerik:RadRotator ID="RadRotatorHorizontal" runat="server" DataSourceID="xmlDataSource1"
                        Height="60px" Width="250px" ItemHeight="60px" ItemWidth="250px" RotatorType="FromCode"
                        ScrollDirection="Left" CssClass="floatRotator">
                        <ItemTemplate>
                            <div class="itemTemplate">
                                <%# XPath("Title") %>
                            </div>
                        </ItemTemplate>
                    </telerik:RadRotator>
                    <ul id="navigationHorizontal" class="commandsWrapper">
                        <li><a href="#" onclick="stopRotator(this, $find('<%= RadRotatorHorizontal.ClientID %>')); return false;"
                            class="stopSelected" title="Stop"><span>Stop</span></a></li>
                        <li><a href="#" onclick="startRotator(this, $find('<%= RadRotatorHorizontal.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                            class="start" title="Start"><span>Start</span></a></li>
                        <li><a href="#" onclick="showNextItem(this, $find('<%= RadRotatorHorizontal.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                            class="left" title="Left"><span>Up</span></a></li>
                        <li><a href="#" onclick="showNextItem(this, $find('<%= RadRotatorHorizontal.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                            class="right" title="Right"><span>Down</span></a></li>
                    </ul>
                </div>
            </div>
            <div style="width: 437px; float: right; position: relative;">
                <span class="title">Vertical Scroll:</span>
                <div class="rotatatorUpDownBack">
                    <telerik:RadRotator ID="RadRotatorVertical" runat="server" DataSourceID="xmlDataSource1"
                        RotatorType="FromCode" Height="40px" Width="250px" ItemHeight="40px" ItemWidth="250px"
                        ScrollDirection="Up" CssClass="floatRotator">
                        <ItemTemplate>
                            <div class="itemTemplate">
                                <%# XPath("Title") %>
                            </div>
                        </ItemTemplate>
                    </telerik:RadRotator>
                    <ul id="navigationVertical" class="commandsWrapper">
                        <li><a href="#" onclick="stopRotator(this, $find('<%= RadRotatorVertical.ClientID %>')); return false;"
                            class="stopSelected" title="stop"><span>stop</span></a></li>
                        <li><a href="#" onclick="startRotator(this, $find('<%= RadRotatorVertical.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                            class="start" title="start"><span>start</span></a></li>
                        <li><a href="#" onclick="showNextItem(this, $find('<%= RadRotatorVertical.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Down); return false;"
                            class="down" title="down"><span>down</span></a></li>
                        <li><a href="#" onclick="showNextItem(this, $find('<%= RadRotatorVertical.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                            class="up" title="up"><span>up</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="qsfClear">
                <!-- -->
            </div>
        </div>

        <script type="text/javascript">

            //<![CDATA[
            function startRotator(clickedButton, rotator, direction)
            {
                if (!rotator.autoIntervalID)
                {
                    refreshButtonsState(clickedButton, rotator);
                    rotator.autoIntervalID = window.setInterval(function()
                    {
                        rotator.showNext(direction);
                    }, rotator.get_frameDuration());
                }
            }

            function stopRotator(clickedButton, rotator)
            {
                if (rotator.autoIntervalID)
                {
                    refreshButtonsState(clickedButton, rotator)
                    window.clearInterval(rotator.autoIntervalID);
                    rotator.autoIntervalID = null;
                }
            }

            function showNextItem(clickedButton, rotator, direction)
            {
                rotator.showNext(direction);
                refreshButtonsState(clickedButton, rotator);
            }

            // Refreshes the Stop and Start buttons
            function refreshButtonsState(clickedButton, rotator)
            {
                var jQueryObject = $telerik.$;
                var className = jQueryObject(clickedButton).attr("class");

                switch (className)
                {
                    case "start":
                        {// Start button is clicked

                            jQueryObject(clickedButton).removeClass();
                            jQueryObject(clickedButton).addClass("startSelected");

                            // Find the stop button. stopButton is a jQuery object
                            var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected");

                            if (stopButton)
                            {// Changes the image of the stop button
                                stopButton.removeClass();
                                stopButton.addClass("stop");
                            }

                        } break;
                    case "stop":
                        {// Stop button is clicked

                            jQueryObject(clickedButton).removeClass();
                            jQueryObject(clickedButton).addClass("stopSelected");

                            // Find the start button. startButton is a jQuery object
                            var startButton = findSiblingButtonByClassName(clickedButton, "startSelected");
                            if (startButton)
                            {// Changes the image of the start button
                                startButton.removeClass();
                                startButton.addClass("start");
                            }

                        } break;
                }
            }

            // Finds a button by its className. Returns a jQuery object
            function findSiblingButtonByClassName(buttonInstance, className)
            {
                var jQuery = $telerik.$;
                var ulElement = jQuery(buttonInstance).parent().parent(); // get the UL element
                var allLiElements = jQuery("li", ulElement); // jQuery selector to find all LI elements

                for (var i = 0; i < allLiElements.length; i++)
                {
                    var currentLi = allLiElements[i];
                    var currentAnchor = jQuery("A:first", currentLi); // Find the Anchor tag

                    if (currentAnchor.hasClass(className))
                    {
                        return currentAnchor;
                    }
                }
            }
            //]]>
        </script>

        <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="news.xml"></asp:XmlDataSource>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451