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

Master and slaves

8 Answers 176 Views

Rotator

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

8 Answers, 1 is accepted

answered on 24 Jul 2008, 03:29 PM

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!

answered on 25 Jul 2008, 09:08 AM

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

answered on 26 Jul 2008, 06:22 PM

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

answered on 29 Jul 2008, 11:57 AM

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.