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

Live Tiles

* Please note that for the purposes of this demo, the quotes are fictional and randomly generated.

The example demonstrates how to use RadLiveTile to visualize live data using Web service. The live tiles are updated after interval specified by the UpdateInterval property of the control. The example also shows how client side event handlers can be used for disabling the error message on request failure, shaping the received data and changing the client template HTML after it is bound.

RadLiveTile is designed to load content on demand from a Web service on a predefined interval. It supports various Web service types like WCF services, Page Methods and OData services. When a predefined interval times out, a request to the service is made and when the data is received a client template is populated and shown with an animation.

RadLiveTile specific configuration properties are:
  • WebServiceSettings offers several properties that configure how the requests are made:
  • ClientTemplate sets the template that will be resolved and populated by the data returned by the Web service.
  • UpdateInterval determines the intervals between data requests.
  • ClientTemplateAnimationSettings sets the animation type, duration and easing.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TileList.Animations.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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 href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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="tilesWrapper">
            <telerik:RadLiveTile ID="DellTile" NavigateUrl="http://finance.yahoo.com/q?s=FB&d=t" runat="server" UpdateInterval="3000" Value="FB">
                <Title ImageUrl="../../images/LiveTiles/logo_Facebook.png"></Title>
            </telerik:RadLiveTile>
            <telerik:RadLiveTile ID="GoogleTile" NavigateUrl="http://finance.yahoo.com/q?s=GOOG&d=t" runat="server" UpdateInterval="4000" Value="GOOG">
                <Title ImageUrl="../../images/LiveTiles/logo_Google.png"></Title>
            </telerik:RadLiveTile>
            <telerik:RadLiveTile ID="YahooTile" NavigateUrl="http://finance.yahoo.com/q?s=YHOO&d=t" runat="server" UpdateInterval="5000" Value="YHOO">
                <Title ImageUrl="../../images/LiveTiles/logo_Yahoo.png"></Title>
            </telerik:RadLiveTile>
            <telerik:RadLiveTile ID="MicrosoftTile" NavigateUrl="http://finance.yahoo.com/q?s=MSFT&d=t" runat="server" UpdateInterval="6000" Value="MSFT">
                <Title ImageUrl="../../images/LiveTiles/logo_Microsoft.png"></Title>
            </telerik:RadLiveTile>
        </div>
        <div style="font-size: 1.2em; padding-top: 10px;">* Please note that for the purposes of this demo, the quotes are fictional and randomly generated.</div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance