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

Standalone Tiles

Mobile users can lock thier lost devices remotely
15°C
Clouds and sun
25.09.2013
Wednesday
Weather
The Moon is 100 million years younger than thought
How High Sea Levels Go by 2100?
Contact us

RadTileList uses a collection of Tiles to create the overall UI of the control. Each of them can be declared separately in the page as a standalone control. The different tile types share most of their properties and ` functionality however there are some specific ones defining the appearance and the elements layout.

  • RadTextTile is designed to only show some text as its primary content. The string is set through its Text property:
  • RadImageTile uses an image as the primary content of the tile. It begins from 0,0 and can be as large as the tile. If it is larger it will be clipped. Unlike the ImageAndText tile it has no text and the Title element is not limited to a smaller size.
  • RadImageAndTextTile consists of an image that starts from the top left corner of the tile and may reach the tile's borders and a text string that is placed between the Title and the Badge. The image is chosen through the ImageUrl property of the tile and the text string is set in the Text property. To accommodate the text the title is narrowed down and is designed to be used with an image instead of text. There are 44 pixels available to the left of the text and 2x10 of them are padding for the title, so the title image that will fit best is 24x24 pixels.
  • RadIconTile has an image centered in its content area that is called an icon. Its URL is set through the ImageUrl of the tile.
  • RadContentTemplateTile is a tile that allows the developer to set any content in the primary content of the tile as well as in the Peek template. This is done by using the ContentTemplate inner tag in the markup and controls can be added programmatically in the code-behind to the tile's ContentContainer.
  • RadLiveTile is designed to load content on demand from a Web service on a predefined interval. It supports various Web service types like WEB and WCF services, Page Methods and OData services. When the UpdateInterval times out a request to the service is made and when the data is received the ClientTemplate is populated and shown with an animation.
  • 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" %>

<!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">
        <div class="imageHeaderWrapper">
            <img src="../../images/Tiles/Image_header.png" class="imageHeader" alt="" />
        </div>
        <telerik:RadLiveTile ID="LiveTile1" OnClientDataLoadingError="telerikDemo.liveTileOnClientDataLoadingError" runat="server" Width="310" Height="310" Value="0" UpdateInterval="4000" OnClientTemplateDataBound="telerikDemo.liveTileOnClientTemplateDataBound">
            <WebServiceSettings Path="defaultcs.aspx" Method="GetTileData" UseHttpGet="false" />
            <ClientTemplateAnimationSettings AnimationDuration="1000" />
            <ClientTemplate>
                    <img class="liveTileTitleImg" src="../../images/Tiles/#= imageName #" alt=""/>
                    <div class="liveTileTitle">#= title #</div>
            </ClientTemplate>
        </telerik:RadLiveTile>
        <telerik:RadImageTile ID="RadImageTile2" runat="server" Shape="Wide" ImageUrl="../../images/Tiles/ImageTile.png">
            <Title Text="Mobile users can lock thier lost devices remotely"></Title>
        </telerik:RadImageTile>
        <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Shape="Wide">
            <ContentTemplate>
                <img class="weatherIcon" src="../../images/Tiles/ContentTemplateTile_icon.png" alt="" />
                <div class="weatherInforWrapper">
                    <div class="degreesWrapper">
                        15&deg;C
                    </div>
                    <div class="weatherText">
                        Clouds and sun<br />
                        25.09.2013<br />
                        Wednesday
                    </div>
                </div>
            </ContentTemplate>
            <Title Text="Weather"></Title>
        </telerik:RadContentTemplateTile>
        <telerik:RadTextTile ID="RadTextTile1" runat="server" Text="The Moon is 100 million years younger than thought" Font-Size="10.5">
        </telerik:RadTextTile>
        <telerik:RadImageAndTextTile ID="RadImageTile1" runat="server" Shape="Wide" Text="How High Sea Levels Go by 2100?" ImageUrl="../../images/Tiles/ImageAndTextTile1.png">
            <PeekTemplateSettings Animation="Slide" ShowInterval="5000" CloseDelay="5000" AnimationDuration="1000" />
            <PeekTemplate>
                <img src="../../images/Tiles/ImageAndTextTile2.png" alt="" />
            </PeekTemplate>
        </telerik:RadImageAndTextTile>
        <telerik:RadIconTile ID="RadIconTile2" runat="server" ImageUrl="../../images/Tiles/IconTile.png">
            <Title Text="Contact us"></Title>
        </telerik:RadIconTile>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance