RadRotator: Combine Automatic and FormCode Rotations

3 posts, 0 answers
  1. Qusay
    Qusay avatar
    3 posts
    Member since:
    Jan 2011

    Posted 09 Jun 2011 Link to this post

     

     

     

    How can I create a a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? I need a complete sample code for the call.

    I've used the following JavaScript/JQuery code for FormCode management:

     

    <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 
    >

    And the following code for the calls:

     

     

     

     

    <
      
    a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %> 
    ')); return false;" 
       
    class="stopSelected" title="Stop"><span>Stop</span></a> <a href="#" onclick="startRotator(this, $find('<%= MyRotator.ClientID %> 
    '), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" 
       
    class="start" title="Start"><span>Start</span></a> <a href="#" onclick="showNextItem(this, $find('<%= MyRotator.ClientID %> 
    '), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" 
      
    class="left" title="Left"><span>Up</span></a> <a href="#" onclick="showNextItem(this, $find('<%= MyRotator.ClientID %> 
    '), Telerik.Web.UI.RotatorScrollDirection.Right); return false;" 
      
    class="right" title="Right"><span>Down</span></a 
    >

     

     

     

     

     

    However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:  

     

    protected void rrMyRotator_DataBound(object sender, EventArgs 
     e) 
    Page.RegisterClientScriptBlock( 
    "MyScript", "<SCRIPT Language='JavaScript'> startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);</SCRIPT>"
    ); 
    }

     

     

     

    Please show me the code that I need to write to start the rotator right after loading the page, and the location where I should place that code. Thank you.

  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 10 Jun 2011 Link to this post

    Hi Qusay,

    Your best option is to attach to the OnClientLoad event and invoke the startRotator method there. I assume that the API that you have accomplished is working correctly. Here is how to accomplish this:
    1. Set the OnClientLoad property of the the rotator to initRotatorOnPageLoad.
    2. Create a function with that same name that will be the event handler, which invokes the startRotator method:
      function initRotatorOnPageLoad(rotator, args)
      {
          startRotator(null, rotator, Telerik.Web.UI.RotatorScrollDirection.Down);
      }

    Hope this helps.
    All the best,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Qusay
    Qusay avatar
    3 posts
    Member since:
    Jan 2011

    Posted 11 Jun 2011 Link to this post

    Thanks a million Niko! I tried your solution and it works great!
Back to Top