All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
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.
<%@ 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 & 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>