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

WebForms TileList 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
Telerik UI for ASP.NET AJAX logo
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
Grid
75
ListView
35
ComboBox
30
PivotGrid
27
Editor
62
DropDownList
14
ImageEditor
26
TreeView
33
Chart (HTML5)
63
Gauge
9
OrgChart
28
Rotator
25
Menu
28
SearchBox
11
TabStrip
24
RibbonBar
14

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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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