Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The PeekTemplate of each Tile can show additional information. The way it is shown and hidden is controlled via the PeekTemplateSettings inner tag. These settings are:
Use the right mouse button to select a tile and change its animation settings from the configurator on the right.
Each of these tiles has a predefined set of options for the animation that shows the PeekTemplate. This list is shown in the PeekTemplate itself for each tile.
Use the configurator on the right to change the animation settings of a given tile to experiment with the possible combinations.
Use the dropdown or select a tile in the TileList to set the desired effects.
<%@ 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" /> <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="rbConfigureAnimations"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTileList1" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <div class="demo-container size-custom"> <telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" ScrollingMode="None" Width="640px" OnClientLoad="telerikDemo.tileListClientLoad" OnClientTileSelected="telerikDemo.updateDropDown" SelectionMode="Single" EnableDragAndDrop="true"> <Groups> <telerik:TileGroup> <telerik:RadImageTile Name="Sofia" ImageUrl="../../images/Wide/Sofia.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Sofia" Target="_blank"> <Title Text="Sofia"></Title> <PeekTemplateSettings AnimationDuration="900" ShowInterval="8000" CloseDelay="7000" Animation="Slide" Easing="easeInQuint" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> <telerik:RadImageTile Name="Istanbul" ImageUrl="../../images/Wide/Istanbul.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Istanbul" Target="_blank"> <Title Text="Istanbul"></Title> <PeekTemplateSettings AnimationDuration="700" ShowInterval="6000" CloseDelay="4000" Animation="Fade" Easing="easeInQuint" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> <telerik:RadImageTile Name="Lisbon" ImageUrl="../../images/Wide/Lisbon.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Lisbon" Target="_blank"> <Title Text="Lisbon"></Title> <PeekTemplateSettings AnimationDuration="600" ShowInterval="10000" CloseDelay="10000" Animation="Resize" Easing="easeInExpo" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> <telerik:RadImageTile Name="Paris" ImageUrl="../../images/Wide/Paris.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Paris" Target="_blank" Selected="true"> <Title Text="Paris"></Title> <PeekTemplateSettings AnimationDuration="800" ShowInterval="5000" CloseDelay="5000" Animation="Slide" Easing="easeInOutBack" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> <telerik:RadImageTile Name="Tokyo" ImageUrl="../../images/Wide/Tokyo.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Tokyo" Target="_blank"> <Title Text="Tokyo"></Title> <PeekTemplateSettings AnimationDuration="400" ShowInterval="10000" CloseDelay="6000" Animation="Fade" Easing="swing" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> <telerik:RadImageTile Name="Melbourne" ImageUrl="../../images/Wide/Melbourne.png" Shape="Wide" NavigateUrl="http://en.wikipedia.org/wiki/Melbourne" Target="_blank"> <Title Text="Melbourne"></Title> <PeekTemplateSettings AnimationDuration="800" ShowInterval="7000" CloseDelay="7000" Animation="Slide" Easing="easeInQuad" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" /> </telerik:RadImageTile> </telerik:TileGroup> </Groups> </telerik:RadTileList> </div> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel> <qsf:ConfiguratorPanel runat="server" Title="Configure animation"> <Views> <qsf:View> <qsf:ConfiguratorColumn runat="server" Size="Medium"> <ul class="fb-group"> <li> <asp:Label ID="lblSelectTile" Text="Select Tile to customize" AssociatedControlID="rddlSelectTile" runat="server" CssClass="label" /> <qsf:DropDownList Size="Wide" runat="server" ID="rddlSelectTile" OnClientLoad="telerikDemo.selectClientLoad" OnClientSelectedIndexChanged="telerikDemo.updateTileList"> <Items> <telerik:DropDownListItem Text="Istanbul" /> <telerik:DropDownListItem Text="Lisbon" /> <telerik:DropDownListItem Text="Melbourne" /> <telerik:DropDownListItem Text="Paris" Selected="true" /> <telerik:DropDownListItem Text="Sofia" /> <telerik:DropDownListItem Text="Tokyo" /> </Items> </qsf:DropDownList> </li> <li> <asp:Label ID="lblAnimationType" Text="Animation Type" AssociatedControlID="ddlAnimationType" runat="server" CssClass="label" /> <qsf:DropDownList ID="ddlAnimationType" Size="Wide" runat="server"> <Items> <telerik:DropDownListItem Text="None" /> <telerik:DropDownListItem Text="Fade" /> <telerik:DropDownListItem Text="Slide" Selected="true" /> <telerik:DropDownListItem Text="Resize" /> </Items> </qsf:DropDownList> </li> <li> <asp:Label ID="lblEasing" Text="Animation Easing" AssociatedControlID="ddlEasing" runat="server" CssClass="label" /> <qsf:DropDownList ID="ddlEasing" runat="server" Size="Wide" DropDownHeight="310px" DropDownWidth="155px"> <Items> <telerik:DropDownListItem Text="none" Value="" /> <telerik:DropDownListItem Text="swing" Value="swing" /> <telerik:DropDownListItem Text="easeLinear" Value="easeLinear" /> <telerik:DropDownListItem Text="easeInQuad" Value="easeInQuad" /> <telerik:DropDownListItem Text="easeOutQuad" Value="easeOutQuad" /> <telerik:DropDownListItem Text="easeInOutQuad" Value="easeInOutQuad" /> <telerik:DropDownListItem Text="easeInCubic" Value="easeInCubic" /> <telerik:DropDownListItem Text="easeOutCubic" Value="easeOutCubic" /> <telerik:DropDownListItem Text="easeInOutCubic" Value="easeInOutCubic" /> <telerik:DropDownListItem Text="easeInQuart" Value="easeInQuart" /> <telerik:DropDownListItem Text="easeOutQuart" Value="easeOutQuart" /> <telerik:DropDownListItem Text="easeInOutQuart" Value="easeInOutQuart" /> <telerik:DropDownListItem Text="easeInQuint" Value="easeInQuint" /> <telerik:DropDownListItem Text="easeOutQuint" Value="easeOutQuint" /> <telerik:DropDownListItem Text="easeInOutQuint" Value="easeInOutQuint" /> <telerik:DropDownListItem Text="easeInSine" Value="easeInSine" /> <telerik:DropDownListItem Text="easeOutSine" Value="easeOutSine" /> <telerik:DropDownListItem Text="easeInOutSine" Value="easeInOutSine" /> <telerik:DropDownListItem Text="easeInExpo" Value="easeInExpo" /> <telerik:DropDownListItem Text="easeOutExpo" Value="easeOutExpo" /> <telerik:DropDownListItem Text="easeInOutExpo" Value="easeInOutExpo" /> <telerik:DropDownListItem Text="easeInCirc" Value="easeInCirc" /> <telerik:DropDownListItem Text="easeOutCirc" Value="easeOutCirc" /> <telerik:DropDownListItem Text="easeInOutCirc" Value="easeInOutCirc" /> <telerik:DropDownListItem Text="easeInElastic" Value="easeInElastic" /> <telerik:DropDownListItem Text="easeOutElastic" Value="easeOutElastic" /> <telerik:DropDownListItem Text="easeInOutElastic" Value="easeInOutElastic" /> <telerik:DropDownListItem Text="easeInBack" Value="easeInBack" /> <telerik:DropDownListItem Text="easeOutBack" Value="easeOutBack" /> <telerik:DropDownListItem Text="easeInOutBack" Value="easeInOutBack" Selected="true" /> <telerik:DropDownListItem Text="easeInBounce" Value="easeInBounce" /> <telerik:DropDownListItem Text="easeOutBounce" Value="easeOutBounce" /> <telerik:DropDownListItem Text="easeInOutBounce" Value="easeInOutBounce" /> </Items> </qsf:DropDownList> </li> <li> <qsf:Button ID="rbConfigureAnimations" Size="Wide" Text="Configure animations" runat="server" /> </li> </ul> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn runat="server" Size="Narrow"> <ul class="fb-group"> <li> <asp:Label ID="lblAnimationDuration" Text="Animation Duration, ms" AssociatedControlID="rntbAnimationDuration" runat="server" CssClass="label" /> <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbAnimationDuration" MinValue="0" MaxValue="10000" ShowSpinButtons="true" Value="800" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100"> </qsf:NumericTextBox> </li> <li> <asp:Label ID="lblShowInterval" Text="Show Interval, ms" AssociatedControlID="rntbShowInterval" runat="server" CssClass="label" /> <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbShowInterval" MinValue="0" MaxValue="20000" ShowSpinButtons="true" Value="5000" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100"> </qsf:NumericTextBox> </li> <li> <asp:Label ID="lblCloseDelay" Text="Close Delay, ms" AssociatedControlID="rntbCloseDelay" runat="server" CssClass="label" /> <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbCloseDelay" MinValue="0" MaxValue="20000" ShowSpinButtons="true" Value="5000" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100"> </qsf:NumericTextBox> </li> </ul> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn runat="server" Size="Narrow"> <ul class="fb-group"> <li> <span class="checkbox"> <asp:CheckBox ID="chbxShowPeekOnMouseOver" Text="Show PeekTemplate on mouseover" Checked="true" runat="server" /> </span> </li> <li> <span class="checkbox"> <asp:CheckBox ID="chbxHidePeekOnMouseOut" Text="Hide PeekTemplate on mouseout" Checked="true" runat="server" /> </span> </li> </ul> </qsf:ConfiguratorColumn> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>