This is a migrated thread and some comments may be shown as answers.

Coordinate 2 rotators movement

6 Answers 63 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

Lynn asked on 20 Dec 2011, 06:18 AM

RotatorCoord1.png

RotatorCoord2.png

I have a page that contains 2 rotators that I want to move in sync with each other -- when the top one moves, I want that movement to trigger the movement of the bottom one.

I have set up the code to do this except I cannot seem to address the second rotator. I capture the movement of the first, then try to find the second in the control collection and set it's index -- similar to an example on your site. But every time I try to find the second rotator, I find that I have grabbed a "div" control instead.

Can you tell me what I need to do? This needs to run on pages with and without master pages.

I ahve attached 2 related screen captures below from during execution.

Thanks in advance!

Lynn

<body>

<script type="text/javascript">

function OnClientItemShown(sender, eventArgs) {

var idx = eventArgs.get_item().get_index();

var oRotator = document.getElementById("<%= RadRotator2.ClientID %>");

alert(oRotator);

oRotator.set_currentItemIndex('1');

}

</script>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<br /><br />

<telerik:RadRotator runat="server" DataSourceID="xmlDataSource1" ID="rotator1" OnClientItemShown="OnClientItemShown"

ScrollDirection="Left" SlideShowAnimation-Type="Fade" RotatorType="SlideShow"

FrameDuration="6000" Width="955px" ItemWidth="955px" Height="398px" ItemHeight="398px">

<ItemTemplate>

<div class="itemTemplate">

<img src="<%# XPath("Image") %>" alt="<%# XPath("Title") %>" style="border: 0px;" />

</div>

</ItemTemplate>

</telerik:RadRotator>

<br /><br />

<div class="xscrollContainer" >

<telerik:RadRotator runat="server" DataSourceID="xmlDataSource2" ID="RadRotator2" ScrollDirection="Left"

SlideShowAnimation-Type="Fade" RotatorType="SlideShow"

FrameDuration="6000" Width="390px" ItemWidth="390px" Height="30px" ItemHeight="30px">

<ItemTemplate>

<div class="itemTemplate">

<%# XPath("Title") %>

</div>

</ItemTemplate>

</telerik:RadRotator>

</div>

<br /><br />

</div>

<asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="photos.xml"></asp:XmlDataSource>

<asp:XmlDataSource ID="xmlDataSource2" runat="server" DataFile="titles.xml"></asp:XmlDataSource>

6 Answers, 1 is accepted

answered on 21 Dec 2011, 05:10 AM

RotatorCoord3.png

Marin,

Many thanks for working on this, but I'm sorry to say that the "$find" as recommended in your response (and in examples on your site) does not return anything. The "$find" is not something I've ever been able to get to resolve to anything.
Please see my attached screen capture and the revised code in inserted below, including the "$find" which returns a null instead of finding anything.

Any other thoughts (please and thank you)?

Lynn

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default7.aspx.vb" Inherits="Default7" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="THDiRotatorStyles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<script type="text/javascript">

function OnClientItemShown(sender, eventArgs) {

var idx = eventArgs.get_item().get_index();

var oRotator = $find("<%= RadRotator2.ClientID %>");

alert("RadRotator2=" + oRotator);

oRotator.set_currentItemIndex(1);

}

</script>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<br /><br />

<telerik:RadRotator runat="server" DataSourceID="xmlDataSource1" ID="rotator1" OnClientItemShown="OnClientItemShown"

ScrollDirection="Left" SlideShowAnimation-Type="Fade" RotatorType="SlideShow"

FrameDuration="6000" Width="955px" ItemWidth="955px" Height="398px" ItemHeight="398px">

<ItemTemplate>

<div class="itemTemplate">

<img src="<%# XPath("Image") %>" alt="<%# XPath("Title") %>" style="border: 0px;" />

</div>

</ItemTemplate>

</telerik:RadRotator>

<br /><br />

<div class="xscrollContainer" >

<telerik:RadRotator runat="server" DataSourceID="xmlDataSource2" ID="RadRotator2" ScrollDirection="Left"

SlideShowAnimation-Type="Fade" RotatorType="SlideShow"

FrameDuration="6000" Width="390px" ItemWidth="390px" Height="30px" ItemHeight="30px">

<ItemTemplate>

<div class="itemTemplate">

<%# XPath("Title") %>

</div>

</ItemTemplate>

</telerik:RadRotator>

</div>

<br /><br />

</div>

<asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="photos.xml"></asp:XmlDataSource>

<asp:XmlDataSource ID="xmlDataSource2" runat="server" DataFile="titles.xml"></asp:XmlDataSource>

</form>

</body>

</html>

answered on 21 Dec 2011, 02:43 PM

Hello Lynn,

The reason the $find method is returning null is because the OnClientShown method is being raised before the second RadRotator object has been fully created. So you need to change your code to something like this:

var isInitialLoad = true;

function OnClientItemShown(sender, eventArgs) {

if (!isInitialLoad) {

var idx = eventArgs.get_item().get_index();

var oRotator = $find("<%= RadRotator2.ClientID %>");

//alert("RadRotator2=" + oRotator);

oRotator.stop();

oRotator.set_currentItemIndex(1);

oRotator.start();

}

isInitialLoad = false;

}

So pretty much what the code above does is it checks it's the initial load of the page. If so, don't change the index of the second rotator. On subsequent times, change the index of the second rotator. You''ll also need to change the FrameDuration of the second rotator to 6005, in order for this code to work.

If you want this to also work on the initial load of the page. You will need to handle the RadRotator2's OnClientLoad event and get the index from RadRotator1.

Also, if I could add my two cents, I don't understand why you would need to do this in the first place when both RadRotators have the same settings set, so they would in sync anyway without the use of this code (As I noted with my experience testing this out).

I hope that helps.

Accepted

answered on 21 Dec 2011, 03:37 PM

Hi Lynn,

I am sorry for one small omission. The OnClientItemShown event is fired when the first item is shown, which is a bit before the RadRotator is fully initialized and loaded. The references to the controls are, however, available in the Sys.Application.Load event (a shortcut to which is the pageLoad() JavaScript function) as this is the event that indicates that all AJAX enabled controls are loaded. This is the reason why $find() returns null before this.

What you can do to resolve this - simply check if the second rotator is available:

if (oRotator) oRotator.set_currentItemIndex(idx);

or attach the OnClientItemShown event handler dynamically in the pageLoad() function as shown here (the add_itemShown() method).

I can also suggest you simply combine the itemTemplates so that there is no need for two synchronized rotators and the data is shown in only one. This is also a solution with better performance and easier implementation, as such a sync is rather hard to achieve.

Kind regards,
Marin
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

answered on 21 Dec 2011, 03:54 PM

Marin,

Thanks for the clarification! I will try that.

Actually I really like the idea of combining the two templates, but how would you do that when the output from each is being shown in two different sizes/shapes/styles? Is there any example out there that talks about this?

What this slideshow has is a rotating photo slideshow, and each photo has a different text caption (explaining what the photo is). The explanations have to be modified at run-time due to multi-lingual requirements so they cannot be embedded into the photo graphics files.

When I get done with this whole integrated slide show user control, I am planning on submitting it to you folks for an example, so any help you could provide would be appreciated and noted.

Thanks!

Lynn

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Coordinate 2 rotators movement

6 Answers, 1 is accepted