Rotator - Multiple Scroller

  • MSFT
    37.47
    -1.23
      
  • AAA
    19.46
    0.41
      
  • WMRT
    13.15
    0.15
      
  • BIX
    1.80
    -0.18
      
  • CLB
    31.24
    -0.16
      
  • LLB
    23.13
    0.34
      
    
  • ZAP
    42.27
    -0.32
      
  • PFZ
    19.16
    1.06
      
  • MRK
    37.15
    0.55
      
  • TIN
    2.80
    -0.11
      
  • HOP
    2.54
    -0.08
      
  • BIP
    12.93
    0.60
      
    
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Each instance of RadRotator has its own unique configuration. You can have many rotators with different configurations on the same page.

  • DefaultCS.aspx
  • styles.css
  • lowerMarquee.xml
    • lowerMarquee.xml
    • upperMarquee.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="Styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div class="top">
            <img src="images/top.gif" width="452" height="35" alt="" />
        </div>
        <div class="marqueeTopBg">
            <div class="marqueeTop_Text">
                <telerik:RadRotator RenderMode="Lightweight" Skin="Silk" ScrollDirection="left" DataSourceID="xmlDataSource1" FrameDuration="1"
                    Width="435" ItemWidth="145" Height="24" ItemHeight="24" ScrollDuration="2000"
                    ID="Rotator1" runat="server">
                    <ItemTemplate>
                        <div class="itemTemplate">
                            <div class="Symbol">
                                <%# XPath("Company")%>
                            </div>
                            <div class="Quote" style="cursor: default; float: left">
                                <%# XPath("Price")%>
                            </div>
                            <div class="Change">
                                <%# XPath("Difference")%>
                            </div>
                            <div style="margin-left: 5px; float: left;">
                                <img src='<%# XPath("Image") %>' style="border: 0px" alt="" />
                            </div>
                            <div class="Quote" style="float: left;">
                                &nbsp;&nbsp;
                            </div>
                        </div>
                    </ItemTemplate>
                </telerik:RadRotator>
            </div>
        </div>
        <div class="marqueeBottomBg">
            <div class="marqueeBottom_Text">
                <telerik:RadRotator RenderMode="Lightweight" Skin="Silk" ScrollDirection="left" DataSourceID="xmlDataSource2" Width="435"
                    ItemWidth="145" Height="24" ItemHeight="24" ScrollDuration="3000" FrameDuration="1"
                    ID="Rotator2" runat="server">
                    <ItemTemplate>
                        <div class="itemTemplate">
                            <div class="Symbol">
                                <%# XPath("Company")%>
                            </div>
                            <div class="Quote" style="cursor: default; float: left">
                                <%# XPath("Price")%>
                            </div>
                            <div class="Change">
                                <%# XPath("Difference")%>
                            </div>
                            <div style="margin-left: 5px; float: left;">
                                <img src='<%# XPath("Image") %>' style="border: 0px" alt="" />
                            </div>
                            <div class="Quote" style="float: left;">
                                &nbsp;&nbsp;
                            </div>
                        </div>
                    </ItemTemplate>
                </telerik:RadRotator>
            </div>
        </div>
        <div class="bottom">
            <img src="images/bottom.gif" width="452" height="108" alt="" /></div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="upperMarquee.xml">
    </asp:XmlDataSource>
    <asp:XmlDataSource ID="xmlDataSource2" runat="Server" DataFile="lowerMarquee.xml">
    </asp:XmlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?