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

Control 2nd Rotator from the first

4 Answers 92 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
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

4 Answers, 1 is accepted

Sort by
0
Fiko
Telerik team
answered on 28 Aug 2009, 02:29 PM
Hello SonicImaging,

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

<%@ 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> 
                    &nbsp;  
                    <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> 
                    &nbsp;  
                    <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> 
                    &nbsp;  
                    <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> 
                    &nbsp;  
                    <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> 
                    &nbsp;  
                    <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> 
                    &nbsp;  
                    <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
Fiko
Telerik team
answered on 03 Mar 2010, 03:57 PM
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.
Tags
Rotator
Asked by
SonicImaging
Top achievements
Rank 1
Answers by
Fiko
Telerik team
SonicImaging
Top achievements
Rank 1
Tim Petlock
Top achievements
Rank 1
Share this question
or