Thanks for looking.
<%@ Page %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Large structured drop-down ASP.NET Menus | RadMenu demo</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<table class="auto-style19">
<tr>
<td class="auto-style20"> </td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/assign.gif" />
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style20"> </td>
<td> </td>
<td> </td>
</tr>
</table>
<telerik:RadToolTip ID="ttAddCompGrid" runat="server" HideEvent="LeaveToolTip" RelativeTo="Element" Skin="MetroTouch" Style="z-index: 20" TargetControlID="image1" BackColor="#FFFF66">
<telerik:RadTileList ID="RadTileList1" runat="server" BackColor="#003366" Skin="Sitefinity" TileRows="2">
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile BackColor="#00CDFF" ImageUrl="tiles/tileManage.jpg" Shape="Wide">
<Title Text="Employee Plan Assignments"></Title>
<Badge ImageUrl="images/style7/tiny_user.png" />
<PeekTemplate>
<div style="width: 310px; height: 110px; vertical-align: top; padding: 1px; background-color: #C3F5FF; color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<table style="width: 310px; height: 110px">
<tr>
<td>
<asp:Image ID="Image2" runat="server" ImageAlign="TextTop" ImageUrl="~/Images/Style7/user.png" />
</td>
<td>Assign Employee Compensation Plans
<ul class="b" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-small; font-weight: normal;">
<li>Assign Compensation Plans</li>
<li>Set Begin and End dates</li>
<li>Make Manual Adjustments</li>
<li>Edit Employee Details</li>
</ul>
</td>
</tr>
</table>
<br />
</div>
</PeekTemplate>
<PeekTemplateSettings Animation="Slide" CloseDelay="0" Easing="easeInSine" HidePeekTemplateOnMouseOut="true" ShowInterval="0" ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile BackColor="#FF1969" ImageUrl="tiles/tilePlans.jpg" NavigateUrl="http://www.google.com" Shape="Wide">
<Title Text="Manage Compensation Plans"></Title>
<Badge ImageUrl="images/style7/tiny_plans.png" />
<PeekTemplate>
<div style="width: 310px; height: 110px; vertical-align: top; padding: 1px; background-color: #FA8AAF; color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<table style="width: 310px; height: 110px">
<tr>
<td>
<asp:Image ID="Image3" runat="server" ImageAlign="TextTop" ImageUrl="~/Images/Style7/plans.png" />
</td>
<td>Compensation Plan Management
<ul class="b" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-small; font-weight: normal;">
<li>Create Plan Components</li>
<li>Assign Bonus Thresholds</li>
<li>Combine components to generate plans</li>
<li>Modify Plan Details</li>
</ul>
</td>
</tr>
</table>
<br />
</div>
</PeekTemplate>
<PeekTemplateSettings Animation="fade" CloseDelay="0" Easing="swing" HidePeekTemplateOnMouseOut="true" ShowInterval="0" ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile BackColor="#642D7D" ImageUrl="tiles/tileBatchRun.jpg" Name="BatchRun" Shape="Wide">
<Title Text="IPP Batch Run"></Title>
<Badge ImageUrl="images/style7/tiny_build.png" />
<PeekTemplate>
<div style="width: 310px; height: 110px; vertical-align: top; padding: 1px; background-color: #9B78AA; color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<table style="width: 310px; height: 110px">
<tr>
<td>
<asp:Image ID="Image4" runat="server" ImageAlign="TextTop" ImageUrl="~/Images/Style7/build.png" />
</td>
<td>Calculate IPP Compensation
<ul class="b" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-small; font-weight: normal;">
<li>Based on individual Year and Period</li>
<li>Calculate IPP Bonus by User and Plan</li>
</ul>
</td>
</tr>
</table>
<br />
</div>
</PeekTemplate>
<PeekTemplateSettings Animation="Slide" CloseDelay="0" Easing="easeInSine" HidePeekTemplateOnMouseOut="true" ShowInterval="0" ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile BackColor="#FFD700" ImageUrl="tiles/tileReporting.jpg" Shape="Wide">
<Title Text="View Summary Reports"></Title>
<Badge ImageUrl="images/style7/tiny_money.png" />
<PeekTemplate>
<div style="width: 310px; height: 110px; vertical-align: top; padding: 1px; background-color: #FAF096; color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<table style="width: 310px; height: 110px">
<tr>
<td>
<asp:Image ID="Image5" runat="server" ImageAlign="TextTop" ImageUrl="~/Images/Style7/money.png" />
</td>
<td>Calculate IPP Compensation
<ul class="b" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-small; font-weight: normal;">
<li>View Summary Report by Year and Period</li>
<li>Itemized by Job Description</li>
<li>Total Year-to-date Budget</li>
</ul>
</td>
</tr>
</table>
<br />
</div>
</PeekTemplate>
<PeekTemplateSettings Animation="Fade" CloseDelay="0" Easing="swing" HidePeekTemplateOnMouseOut="true" ShowInterval="0" ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
</telerik:RadToolTip>
</form>
</body>
</html>
3 Answers, 1 is accepted
RadTileList is a top level navigation control and is not intended to be nested under such controls, especially ones like the RadToolTip or RadWindow's ContentTemplate that move their contents in the DOM when shown, or generally in containers that are initially hidden. The two controls mentioned above change the place of the HTML markup after the control has been initialized and this is why its dimensions are no longer properly calculated.
Said shortly, I am afraid that this scenario is not supported by the RadTileList.
What I an suggest is waiting for the Q3 2013 release when the tiles will be available as separate controls so you will be able to put them in a tooltip.
Regards,
Marin Bratanov
Telerik
Rank 2
The homepage of the site is created by using custom controls, JavaScript widgets and simply HTML and CSS and not a RadTileList. This particular list is simply HTML and CSS.
Regards,
Marin Bratanov
Telerik