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

WebForms TileList Overview

AJAX Suite Overview

UI controls for ASP.NET AJAX, MVC, WPF, Silverlight, Windows 8 and Windows Phone

The Telerik Blogs ASP.NET AJAX Team

Peer-to-Peer Forums

We've been developing controls for ASP.NET AJAX since the technologyâ€™s inception & the contributions from the community prove that.

Talk with peers in the forums

Cut your development time while building awesome apps with the performance you desire.

ASP.NET AJAX

Video Tutorials

Over 300 videos (and growing!) on Telerik TV that guide you through new features and controls for ASP.NET AJAX.

Documentation

Popular Controls and Demo Counts

Grid

ListView

ComboBox

PivotGrid

Editor

DropDownList

ImageEditor

TreeView

Chart (HTML5)

Gauge

OrgChart

Rotator

SearchBox

TabStrip

RibbonBar

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

Scan the QR code to test the behavior of our controls on mobile devices.

A basic declaration of a RadTileList that can be used in an entry page on your site to provide navigation to different areas. In this case general pages are linked in the first group and specific controls and their demos afterwards.

About RadTileList for ASP.NET AJAX

Take advantage of the modern Windows8 style navigation in your web application by using the RadTileList control. It offers different tile types and shapes that you can use to distinguish the more important links in your entry page. Images can show visual hints about what is behind each link and the text, title and badge let you show even more information. Automated animations can let a hidden template peek behind the original content to bring your user's attention to that particular tile. Say hello to the most engaging navigation menus yet!

RadTileList and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

You can see all the major features of the control in this demo: Selection, Peek Templates, Animations and animation easing, various tile types and, of course, each tiles will navigate to a certain page.

Key Features

Visual navigation similar to Windows8
Various targets for the navigation
Different tile types and shapes
Peek templates
Tile groups
Tile groups titles
Selection
Can simulate native scrolling
Rich API and events

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TileList.Overview.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" />
</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">
    <telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" Height="500px" TileRows="3"
        SelectionMode="Multiple" EnableDragAndDrop="true">
        <Groups>
            <telerik:TileGroup Title="AJAX Suite Overview">
                <telerik:RadImageAndTextTile Shape="Wide" NavigateUrl="http://www.telerik.com/developer-productivity-tools.aspx"
                    Target="_blank" Text="UI controls for ASP.NET AJAX, MVC, WPF, Silverlight, Windows 8 and Windows Phone"
                    ImageUrl="../../images/Wide/img_DevTools1.png" BackColor="#00b37d" Selected="true">
                    <PeekTemplate>
                        <img src="../../images/Wide/img_DevTools2.png" alt="DevTools" style="display: block;" />
                    </PeekTemplate>
                    <PeekTemplateSettings Animation="Slide" AnimationDuration="800" Easing="easeInOutBack"
                        ShowInterval="5000" CloseDelay="5000" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                </telerik:RadImageAndTextTile>
                <telerik:RadImageAndTextTile ImageUrl="../../images/Wide/img_blog.png" Text="The Telerik Blogs ASP.NET AJAX Team"
                    Shape="Wide" NavigateUrl="http://blogs.telerik.com/aspnet-ajax/posts.aspx" Target="_blank"
                    BackColor="#25a0da">
                    <Title ImageUrl="../../images/Icons/icon_blog.png" />
                </telerik:RadImageAndTextTile>
                <telerik:RadContentTemplateTile NavigateUrl="http://www.telerik.com/forums/aspnet-ajax"
                    Target="_blank" Shape="Wide" BackColor="#07a9bc">
                    <ContentTemplate>
                        <div class="wideContent font14">
                            <div class="font22">
                                Peer-to-Peer Forums</div>
                            <div>
                                We've been developing controls for ASP.NET AJAX since the technology’s inception
                                &amp; the contributions from the community prove that.</div>
                        </div>
                    </ContentTemplate>
                    <Title Text="Talk with peers in the forums"></Title>
                </telerik:RadContentTemplateTile>
                <telerik:RadContentTemplateTile NavigateUrl="http://www.telerik.com/products/aspnet-ajax.aspx"
                    Target="_blank" Shape="Wide" BackColor="#03953f">
                    <Title Text="ASP.NET AJAX"></Title>
                    <ContentTemplate>
                        <div style="padding: 20px 10px; background-color: #007D33; width: 290px; height: 65px;
                            vertical-align: top;">
                            <img style="width: 64px; vertical-align: top;" class="qsf-ib" src="../../images/Icons/icon_ajax.png"
                                alt="Telerik UI for ASP.NET AJAX logo" />
                            <div style="width: 210px; vertical-align: top; padding-left: 10px;" class="qsf-ib font14">
                                Cut your development time while building awesome apps with the performance you desire.
                            </div>
                        </div>
                    </ContentTemplate>
                </telerik:RadContentTemplateTile>
                <telerik:RadContentTemplateTile NavigateUrl="http://tv.telerik.com/products/aspnet-ajax"
                    Target="_blank" Shape="Wide" BackColor="#b53e60">
                    <ContentTemplate>
                        <div class="wideContent font14">
                            <div class="font22">
                                Video Tutorials</div>
                            <div>
                                Over 300 videos (and growing!) on Telerik TV that guide you through new features
                                and controls for ASP.NET AJAX.</div>
                        </div>
                    </ContentTemplate>
                    <Title ImageUrl="../../images/Icons/icon_video.png"></Title>
                </telerik:RadContentTemplateTile>
                <telerik:RadImageTile NavigateUrl="http://www.telerik.com/help/aspnet-ajax/introduction.html"
                    Target="_blank" ImageUrl="../../images/Wide/img_documentation.png" Shape="Wide">
                    <Title Text="Documentation"></Title>
                </telerik:RadImageTile>
            </telerik:TileGroup>
            <telerik:TileGroup Title="Popular Controls and Demo Counts">
                <telerik:RadIconTile Name="Grid" NavigateUrl="http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_grid.png" BackColor="#007ac0">
                    <Title Text="Grid"></Title>
                    <PeekTemplate>
                        <div style="background-color: #007ac0" class="wideContent font18">
                            Paging, sorting, filtering, data editing, grouping and hierarchy with desktop-like
                            performance.
                        </div>
                    </PeekTemplate>
                    <PeekTemplateSettings CloseDelay="6000" ShowInterval="3000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                        ShowPeekTemplateOnMouseOver="true" />
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="ListView" NavigateUrl="http://demos.telerik.com/aspnet-ajax/listview/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_listview.png" BackColor="#f8b617">
                    <Title Text="ListView"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="ComboBox" NavigateUrl="http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_ComboBox.png" BackColor="#f37928">
                    <Title Text="ComboBox"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="PivotGrid" NavigateUrl="http://demos.telerik.com/aspnet-ajax/pivotgrid/examples/firstlook/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_pivotgrid.png">
                    <Title Text="PivotGrid"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="Editor" NavigateUrl="http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_editor.png" BackColor="#03953f">
                    <Title Text="Editor"></Title>
                    <PeekTemplate>
                        <img src="../../images/Wide/img_edit.png" alt="" />
                    </PeekTemplate>
                    <PeekTemplateSettings Animation="Slide" ShowInterval="4000" CloseDelay="3000" AnimationDuration="800"
                        ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" Easing="easeOutExpo" />
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="DropDownList" NavigateUrl="http://demos.telerik.com/aspnet-ajax/dropdownlist/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_DropDownList.png"
                    BackColor="#963d93">
                    <Title Text="DropDownList"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="ImageEditor" NavigateUrl="http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_ImageEditor.png"
                    BackColor="#07a9bc">
                    <Title Text="ImageEditor"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="TreeView" NavigateUrl="http://demos.telerik.com/aspnet-ajax/treeview/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_treeview.png" BackColor="#82c92f">
                    <Title Text="TreeView"></Title>
                    <PeekTemplate>
                        <div style="background-color: #82c92f" class="wideContent font18">
                            Hierarchical navigation with drag and drop and checkbox support.
                        </div>
                    </PeekTemplate>
                    <PeekTemplateSettings Animation="Fade" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    <PeekTemplateSettings />
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="HtmlChart" NavigateUrl="http://demos.telerik.com/aspnet-ajax/htmlchart/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_chart.png" BackColor="#c83c21">
                    <Title Text="Chart (HTML5)"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="Gauge" NavigateUrl="http://demos.telerik.com/aspnet-ajax/gauge/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_gauge.png" BackColor="#03953f">
                    <Title Text="Gauge"></Title>
                    <PeekTemplate>
                        <img src="../../images/Square/img_gauge.png" alt="" />
                    </PeekTemplate>
                    <PeekTemplateSettings Animation="Slide" ShowInterval="2000" CloseDelay="5000" ShowPeekTemplateOnMouseOver="true"
                        HidePeekTemplateOnMouseOut="true" />
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="OrgChart" NavigateUrl="http://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_orgchart.png">
                    <Title Text="OrgChart"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="Rotator" NavigateUrl="http://demos.telerik.com/aspnet-ajax/rotator/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_rotator.png" BackColor="#a2316e">
                    <Title Text="Rotator"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="Menu" NavigateUrl="http://demos.telerik.com/aspnet-ajax/Menu/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_menu.png" BackColor="#f8b617">
                    <Title Text="Menu"></Title>
                    <PeekTemplate>
                        <div style="background-color: #f8b617" class="wideContent font18">
                            Lightweight, SEO-friendly menu navigation. Flexible and easy-to-customize.
                        </div>
                    </PeekTemplate>
                    <PeekTemplateSettings Animation="Fade" ShowInterval="4000" ShowPeekTemplateOnMouseOver="true"
                        HidePeekTemplateOnMouseOut="true" />
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="SearchBox" NavigateUrl="http://demos.telerik.com/aspnet-ajax/searchbox/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_SearchBox.png"
                    BackColor="#f37928">
                    <Title Text="SearchBox"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="TabStrip" NavigateUrl="http://demos.telerik.com/aspnet-ajax/tabstrip/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Square" ImageUrl="../../images/Icons/icon_TabStrip.png" BackColor="#82c92f">
                    <Title Text="TabStrip"></Title>
                </telerik:RadIconTile>
                <telerik:RadIconTile Name="RibbonBar" NavigateUrl="http://demos.telerik.com/aspnet-ajax/ribbonbar/examples/overview/defaultcs.aspx"
                    Target="_blank" Shape="Wide" ImageUrl="../../images/Icons/icon_RibbonBar.png">
                    <Title Text="RibbonBar"></Title>
                </telerik:RadIconTile>
            </telerik:TileGroup>
        </Groups>
    </telerik:RadTileList>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support