New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Weather Forecast

  • Friday
    max day
    18oC
    min night
    10oC
  • Friday
    max day
    22oC
    min night
    13oC
  • Friday
    max day
    21oC
    min night
    11oC
    

This example demonstrates how easy it is to build a widget that displays information about the weather forecast with the help of RadRotator and RadTicker.

  • DefaultCS.aspx
  • Styles.css
  • forecast.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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/weather.gif" alt="" width="402" height="20" /></div>
        <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1"
            FrameDuration="4000" ScrollDuration="500" ScrollDirection="Up" Height="120px"
            Width="403px">
            <ItemTemplate>
                <div class="details">
                    <div class="day">
                        <img src="<%# XPath("Image") %>" width="93" height="94" alt="Friday" /></div>
                    <div class="paneCenter">
                        <div class="paneCenter_Text">
                            <%# XPath("Temperature") %>
                        </div>
                    </div>
                    <div class="paneDetails">
                        <div class="paneDetails_Text" style="text-align: left">
                            <telerik:RadTicker ID="ticker1" runat="server">
                                <Items>
                                    <telerik:RadTickerItem Text='<%# XPath("Ticker")%>'></telerik:RadTickerItem>
                                </Items>
                            </telerik:RadTicker>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
        <div class="bottom"></div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="forecast.xml"></asp:XmlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance