RadRotator: Combine Automatic and FormCode Rotations

[Qusay]

 

 

 

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.

[Niko]

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

[Qusay]

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