SonicImaging
Top achievements
Rank 1
SonicImaging
asked on 27 Aug 2009, 02:26 PM
Hi, I have a main rotator in a content page that rotates 5 banner images. Then on the master page I have a 2nd rotator which displays products that match the main rotator. I databind each rotator separately but from the same datasource and they either start off out of sync or after a while they get out of sync.
The ScrollDuration and the FrameDuration are set the same.
Are there any examples on how I can sync the 2nd rotator in the master page to the one in the content page, like when the frame changes on the main rotator it changes the frame on the 2nd?
Thanks for any help
-Keith
The ScrollDuration and the FrameDuration are set the same.
Are there any examples on how I can sync the 2nd rotator in the master page to the one in the content page, like when the frame changes on the main rotator it changes the frame on the 2nd?
Thanks for any help
-Keith
4 Answers, 1 is accepted
0
Hello SonicImaging,
In your case I recommend you to use the following approach :
For your convenience I have attached a full demo and I believe that it will be of help.
All the best,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
In your case I recommend you to use the following approach :
- Setup one of the rotators in FromCode mode (RotatorType="FromCode"). In the attached example the rotator that is on the DefaultWithMaster.aspx page is set in this mode.
- Attach a handler to the OnClientItemShowing event of the first rotator - that is on the MasterPage
- Implement the handler as follows :
<script type="text/javascript"> function OnClientItemShowing(oRotator1, args) { var oRotator2 = $find("<%= RadRotator2.ClientID %>"); oRotator2.showNext(Telerik.Web.UI.RotatorScrollDirection.Left); } </script>
For your convenience I have attached a full demo and I believe that it will be of help.
All the best,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
SonicImaging
Top achievements
Rank 1
answered on 28 Aug 2009, 07:35 PM
Thanks for the reply, works great!!
-Keith
-Keith
0
Tim Petlock
Top achievements
Rank 1
answered on 26 Feb 2010, 10:48 PM
Is this dependent on a master page somehow? When I run the code below I get
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
The goal is to have seven of the rotators slaved to the first so they rotate in sync.
If I put the script inside a RadCodeBlock the page will not throw an error but the first and second rotators never move.
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
The goal is to have seven of the rotators slaved to the first so they rotate in sync.
If I put the script inside a RadCodeBlock the page will not throw an error but the first and second rotators never move.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> |
<!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> |
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> |
<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Office2007"> |
</telerik:RadSkinManager> |
<div> |
<script type="text/javascript"> |
function OnClientItemShowing(oRotator1, args) { |
var oRotator2 = $find("<%=RadRotator2.ClientID %>"); |
oRotator2.shownext(Telerik.WebUI.RotatorScrollDirection.Left); |
} |
</script> |
<table width="1220"> |
<tr> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="SqlPanel1DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000" OnClientItemShowing="OnClientItemShowing" > |
<ItemTemplate> |
<asp:Image ID="Graph1Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator2" runat="server" DataSourceID="SqlPanel2DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000" RotatorType="FromCode" > |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
</tr> |
<tr> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator3" runat="server" DataSourceID="SqlPanel3DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel4" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator4" runat="server" DataSourceID="SqlPanel4DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
</tr> |
<tr> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator5" runat="server" DataSourceID="SqlPanel5DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
<td> |
|
<telerik:RadAjaxPanel ID="RadAjaxPanel6" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator6" runat="server" DataSourceID="SqlPanel6DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
</tr> |
<tr> |
<td> |
<telerik:RadAjaxPanel ID="RadAjaxPanel7" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator7" runat="server" DataSourceID="SqlPanel7DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
<td> |
<telerik:RadAjaxPanel ID="RadAjaxPanel8" runat="server" height="210px" |
width="605px"> |
<telerik:RadRotator ID="RadRotator8" runat="server" DataSourceID="SqlPanel8DS" |
Height="210px" ItemHeight="207px" ItemWidth="603px" ScrollDirection="Up" |
Skin="Office2007" Width="605px" ScrollDuration="1000"> |
<ItemTemplate> |
<asp:Image ID="Graph2Image" runat="server" ImageAlign="Left" ImageUrl='<%#String.Format("{0}",DataBinder.Eval(Container.DataItem, "URL")) %>' /> |
</ItemTemplate> |
</telerik:RadRotator> |
</telerik:RadAjaxPanel> |
</td> |
</tr> |
</table> |
</div> |
<asp:SqlDataSource ID="SqlPanel1DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel1" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel2DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel2" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel3DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel3" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel4DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel4" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel5DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel5" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel6DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel6" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel7DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel7" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
<asp:SqlDataSource ID="SqlPanel8DS" runat="server" |
ConnectionString="<%$ ConnectionStrings:ServerMonitorConnectionString %>" |
SelectCommand="SELECT [WhichPanel], [URL] FROM [PanelSources] WHERE ([WhichPanel] = @WhichPanel)"> |
<SelectParameters> |
<asp:Parameter DefaultValue="Panel8" Name="WhichPanel" Type="String" /> |
</SelectParameters> |
</asp:SqlDataSource> |
</form> |
</body> |
</html> |
0
Hello Tim,
I have already answered your support ticket with the same question.
Greetings,
Fiko
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.
I have already answered your support ticket with the same question.
Greetings,
Fiko
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.