Master and slaves

9 posts, 0 answers
  1. Pierre
    Pierre avatar
    138 posts
    Member since:
    Feb 2006

    Posted 24 Jul 2008 Link to this post

    Hi,

    Congratulations for this new version. How to create one master rotator defining the parameters and slaves, that use the same source, having synchronized outputs,and  using same page or not. Regards
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 24 Jul 2008 Link to this post

    If I understand you correctly you goal is to control all RadRotators from the first one - on the client. I created a simple example with two rotators, so when the RadRotator1 OnClientItemShowing event is fired, the second RadRotator is rotated in the same direction as RadRotator1 direction.
    ASPX:
    <head> 
        <title>Untitled Page</title> 
        <script type="text/javascript">  
        function ClientItemShowing(slider,args)  
        {    
            $find('<%=RadRotator2.ClientID%>').showNext(slider.get_animationDirection());  
        }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
        <table> 
            <tr> 
                <td style="width:300px">  
             <telerik:RadRotator ID="RadRotator1" runat="server" 
                Width="140px" 
                Height="40px" 
                ScrollDirection ="Left,Right" 
                WrapFrames="true" 
                RotatorType="Buttons" 
                ItemWidth="100px" ItemHeight="40px" 
               OnClientItemShowing="ClientItemShowing" 
                > 
                <Items> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Blue"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Red"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Green"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                </Items> 
                </telerik:RadRotator> 
               </td> 
                <td> 
                  
                <telerik:RadRotator ID="RadRotator2" runat="server" 
                Width="100px" 
                Height="40px" 
                ScrollDirection ="Left,Right" 
                RotatorType="FromCode" 
                ItemWidth="100px" ItemHeight="40px" 
                WrapFrames="true" 
                > 
                <Items> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Blue"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Red"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Green"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                </Items> 
                </telerik:RadRotator> 
                </td> 
            </tr> 
        </table> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    The following online examples helped me:
    1)http://www.telerik.com/DEMOS/ASPNET/Prometheus/Rotator/Examples/ClientAPIControl/DefaultCS.aspx
    2)
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Rotator/Examples/ClientAPI/DefaultCS.aspx
    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pierre
    Pierre avatar
    138 posts
    Member since:
    Feb 2006

    Posted 24 Jul 2008 Link to this post

    Hi Obi-Wan,

    Can make similar but using not the same page, The master is in one page and the slaves are in other pages. One page, one rotator master, other pages slaves with same parameters. If we add a timer or transition to master, slaves heriting and change from master command. Regards
  5. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 25 Jul 2008 Link to this post

    I created javascript array with all RadRotatorIDs(in masterpage), and all "slaves" IDs are added into the RadRotatorIDs Array, e.g.
    MASTERPAGE ASPX:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!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> 
        <title>Untitled Page</title> 
        <script type="text/javascript">  
        var allSlaveRotatorsIDs =new Array();  
        function ClientItemShowing(slider,args)  
        {    
            var x;  
            for (x in allSlaveRotatorsIDs)  
            {  
                $find(allSlaveRotatorsIDs[x]).showNext(slider.get_animationDirection());  
            }  
        }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
         <telerik:RadRotator ID="RadRotator1" runat="server" 
                Width="140px" 
                Height="40px" 
                ScrollDirection ="Left,Right" 
                WrapFrames="true" 
                RotatorType="Buttons" 
                ItemWidth="100px" ItemHeight="40px" 
               OnClientItemShowing="ClientItemShowing" 
                > 
                <Items> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Blue"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Red"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Green"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                </Items> 
                </telerik:RadRotator> 
                  
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">  
            </asp:contentplaceholder> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    CONTENTPAGE ASPX:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  
    <script type="text/javascript">  
    allSlaveRotatorsIDs[allSlaveRotatorsIDs.length] = '<%=RadRotator2.ClientID %>';  
    allSlaveRotatorsIDs[allSlaveRotatorsIDs.length] = '<%=RadRotator3.ClientID %>';  
    </script> 
    <table border="2">  
        <tr> 
            <td> 
            ContentPage rotators:  
            </td> 
            <td> 
            <telerik:RadRotator ID="RadRotator2" runat="server" 
                Width="100px" 
                Height="40px" 
                ScrollDirection ="Left,Right" 
                RotatorType="FromCode" 
                ItemWidth="100px" ItemHeight="40px" 
                WrapFrames="true" 
                > 
                <Items> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Blue"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Red"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Green"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                </Items> 
                </telerik:RadRotator> 
                  
        
            </td> 
            <td> 
                <telerik:RadRotator ID="RadRotator3" runat="server" 
                Width="100px" 
                Height="40px" 
                ScrollDirection ="Left,Right" 
                RotatorType="FromCode" 
                ItemWidth="100px" ItemHeight="40px" 
                WrapFrames="true" 
                > 
                <Items> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Blue"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Red"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                    <telerik:RadRotatorItem> 
                        <ItemTemplate> 
                            <div style="width:100px;height:40px;background-color:Green"></div> 
                        </ItemTemplate> 
                    </telerik:RadRotatorItem> 
                </Items> 
                </telerik:RadRotator> 
            </td> 
        </tr> 
    </table> 
                
    </asp:Content> 
     
     

    Hope this helps

  6. Pierre
    Pierre avatar
    138 posts
    Member since:
    Feb 2006

    Posted 26 Jul 2008 Link to this post

    Hi Obi-Wan

    I have study your proposition, but is not a solution to my problem.They are synchronized but in the same master page, the master command contents. I need to control many rotators for one page to others pages. The users connect to the pages, and from one Default.aspx all others slaves are commanded and synchronized. If you open many times Default2.aspx you have the same content and synchronized with Default.Aspx.

    Default0.aspx is master -->one window with definitions
    Default1.aspx is slave  -->one window2 listen 0
    Default2.aspx is slave  -->one window3 listen 0
    Default3.aspx is slave  -->one window4 listen 0

    I need to pass some value from Default to slaves that listen to synchronize.
    Your help this highly appreciated.

    Regards


  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 28 Jul 2008 Link to this post

    I think that I couldn't understand your final goal.Can I see something similar over the net? If you know some place where I can see it, please send it and I will help you.
    The RadRotator and Repeater controls are similar. Please create a simple example which illustrates your goals with the Repeater control and post it here.Once you post it I will try to replace the Repeater control with RadRotator.
  8. Pierre
    Pierre avatar
    138 posts
    Member since:
    Feb 2006

    Posted 28 Jul 2008 Link to this post

    Hi,

    Here is the image, many displays.
    http://rapidshare.com/files/133105648/Rotators.jpg

    Regards
  9. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 29 Jul 2008 Link to this post

    Hello Pierre,

    I think the best way to accomplish what you want is to use ASP.NET Themes. You can create a skin file with a RadRotator declaration inside it with the item template and all other settings except the DataSourceID property. A data source cannot be set from a skin, so you will need to set it manually on all pages that use this rotator theme. However, you should be able to set everything else (rotator type, size, template) from the theme.

    If you do not wish to set the data source of all "child" rotators, then the only solution is to create a new control, which inherits from RadRotator, set datasource an all other settings in the code of the new control, and then use it instead of the normal RadRotator on your pages.

    Best wishes,
    Lini
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Pierre
    Pierre avatar
    138 posts
    Member since:
    Feb 2006

    Posted 29 Jul 2008 Link to this post

    Hi,

    Ok, Add in Themes is similar that add in master pages and using webcontrols for Database, but my problem is how to synchronize these pages. Could you make some basic sample and synchronize 3 pages from one definition.
    Regards
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017