Possible to put Tiles in a Tooltip?

4 posts, 0 answers
  1. Stefan
    Stefan avatar
    58 posts
    Member since:
    Jan 2013

    Posted 09 Aug 2013 Link to this post

    When I put these 4 tiles in a tooltip they turn into a stack of 1 colum 4 rows.  But I want 2 rows 2 columns which work fine if I take the TileList out of the Tooltip.  Its only when I put the RadTileList in the RadToolTip that they begin to stack no mater what I set the row count or how many tiles I add its always just 1 column of tiles.  It is possible to put multiple column tiles in a tooltip?  Here is the code like I said outside the tooltip no problem once inside it goes to 1 column not matter how wide or high I make the tooltip.

    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">&nbsp;</td>
                    <td>
     
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/assign.gif" />

                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style20">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</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>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 13 Aug 2013 Link to this post

    Hello Stefan,

     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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefan
    Stefan avatar
    58 posts
    Member since:
    Jan 2013

    Posted 13 Aug 2013 Link to this post

    Thanks for the reply. Can you tell me how it is done like when u click on product family under the telerik top banner? Is that a menu control or?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Aug 2013 Link to this post

    Hi Stefan,

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top