Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Master and slaves

8 Answers 149 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 24 Jul 2008, 02:07 PM
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

8 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
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!
0
Pierre
Top achievements
Rank 1
answered on 24 Jul 2008, 06:26 PM
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
0
Obi-Wan Kenobi
Top achievements
Rank 1
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

0
Pierre
Top achievements
Rank 1
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


0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 28 Jul 2008, 01:10 PM
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.
0
Pierre
Top achievements
Rank 1
answered on 28 Jul 2008, 04:23 PM
Hi,

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

Regards
0
Lini
Telerik team
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.
0
Pierre
Top achievements
Rank 1
answered on 29 Jul 2008, 02:01 PM
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
Tags
Rotator
Asked by
Pierre
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Pierre
Top achievements
Rank 1
Lini
Telerik team
Share this question
or