RotatorType: need Buttons AND AutomaticAdvance

11 posts, 0 answers
  1. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2009

    Posted 09 Mar 2010 Link to this post

    Hi,

    We need the rotator to cycle using both the buttons AND advance automatically every 5 seconds if nothing is clicked
    (RotatorType = Buttons AND AutomaticAdvance). Is this possble?

    Also, we would like to pause the automatic advance if the user's mouse is hovered over the rotator.

    Thanks!
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Mar 2010 Link to this post

    Hello Adam,

    You could use client side api for rotating/pausing radrotator based on the requirement. The following documentation shows important client side methods of RadRotator.

    RadRotator Client-Side

    -Shinu.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2009

    Posted 13 Mar 2010 Link to this post

    Can you please send a code sample for both requests? That page has no practical samples.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Mar 2010 Link to this post

    Hi Adam,

    Please take a look at the following examples from our online demos web-site:

    You could easily combine them to implement your specific scenario.

    PS. Visit our Code Library and Knowledge Base for additional information about the RadRotator control.


    Sincerely yours,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2009

    Posted 18 Mar 2010 Link to this post

    Thanks, I was able to get this working. However, it should be easier to combine effects via the properties, without all of this script. Otherwise, you're better off using the free jquery cycle plugin :)

    Here's my solution:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Rotator.ascx.cs" Inherits="App_Custom_ControlTemplates_Callouts_Rotator" %>
    <telerik:RadRotator ID="rotator1" runat="server" Width="240px" Height="104px" ScrollDuration="500"
        FrameDuration='<%#FrameDuration%>' ItemWidth="200px" ItemHeight="104px" EnableAjaxSkinRendering="true"
        EnableEmbeddedSkins="true" EnableViewState="true">
        <ItemTemplate>
            <div class="rotator-wrapper">
                <strong class="title">
                    <%#Eval("Title")%></strong>
                <br />
                <%#Eval("Content")%>
            </div>
        </ItemTemplate>
    </telerik:RadRotator>

    <script type="text/javascript">

        $(document).ready(
                function() {
                
                    startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);

                    $(".rrClipRegion").hover(
                      function() {
                            stopRotator($find('<%= rotator1.ClientID %>'));
                      },
                      function() {
                            startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);
                      }
                    );


                }
            );

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

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

        function showNextItem(rotator, direction) {
            rotator.showNext(direction);
            //refreshButtonsState(clickedButton, rotator);
        }
    </script>
  7. Chris
    Chris avatar
    1 posts
    Member since:
    Apr 2010

    Posted 10 May 2010 Link to this post

    Adam,

    Thanks for your solution; I'm going to try and see how it works on my end, but that's exactly the functionality I'm looking for.  I agree it would be nice to have it as a standard rotator type.  I don't see the benefit of the AutomaticAdvance if you can't stop and go back and review something that just scrolled by.  My particular scenario I'm displaying five of potentially hundreds of products.  The client wants a slow auto advance, but if someone sees something they want, and then it auto advances, there'd be no way to go back with the default autoadvance. 
  8. Matteo Tognolo
    Matteo Tognolo avatar
    1 posts
    Member since:
    Sep 2012

    Posted 08 Mar 2011 Link to this post

    Hi to all,

    I have tested the code above:

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

    and receive a javascript error in "autoIntervalID". 'autoIntervalID' is null or not an object.

    I have download the last version of all kit and instal it, but the error is the same.

    How can I resolve?

    Thanks in advance,

    Matteo
  9. Niko
    Admin
    Niko avatar
    387 posts

    Posted 11 Mar 2011 Link to this post

    Hi Matteo,

    Can you provide more information about the error:
    1. On which line it occurs?
    2. What is the message?
    3. When is the error occurring - at page load, when unloading the page or any other event?

    Kind regards,
    Nikodim
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  10. H. Baris
    H. Baris avatar
    7 posts
    Member since:
    Feb 2011

    Posted 22 Nov 2011 Link to this post

    Hi,

    I have same issue.
    Microsoft JScript runtime error: Unable to get value of the property 'autoIntervalID': object is null or undefined

    on page load, in bold line:

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

    Correction:
    If the script is placed on top of rotator's error taken, not taken placed in the bottom.
    But buttons are not functional.

    Another and last correction:
    I converted Rotator's control buttons to img. And added onclick events to imgs. Everythings worked. 
  11. Niko
    Admin
    Niko avatar
    387 posts

    Posted 23 Nov 2011 Link to this post

    Hello,

    Such an error message is typical for the Internet Explorer browser and it is usually about the object that should have the property, and for some reason that object is null or undefined. This means that in your case for some reason the rotator variable is null or undefined, not the property autoIntervalID.
    The reason for such a behavior may be different and the first that I can think of is reloading the RadRotator through Ajax requests and not refreshing the rotator reference. Still I will need a sample runnable project in order to investigate the issue in details. For that I advise you to open a support ticket and attach the sample project there.

    Hope this helps.

    Best wishes,
    Niko
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  12. Leigh
    Leigh avatar
    1 posts
    Member since:
    Apr 2012

    Posted 16 Apr 2012 Link to this post

    Apologies for replying to an old thread however I wanted to add a small addition to H. Baris's response that may be handy for anyone else attempting this.

    As this error is being caused by the javascript running before the page is fully loaded I corrected the issue by swapping the dom ready for a load event. For example swap:

    $(document).ready(function () {

    for

    $(window).load(function () {

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017