Control 2nd Rotator from the first

5 posts, 0 answers
  1. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 27 Aug 2009 Link to this post

    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
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 28 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 28 Aug 2009 Link to this post

    Thanks for the reply,  works great!!

    -Keith
  5. Tim Petlock
    Tim Petlock avatar
    4 posts
    Member since:
    Oct 2009

    Posted 26 Feb 2010 Link to this post

    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> 
     
  6. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 03 Mar 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017