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

    RadToolTip for RadTreeView

    • Beverages
    • Condiments
    • Confections
    • Dairy Products
    • Grains/Cereals
    • Meat/Poultry
    • Produce
    • Seafood
    • Beverages
    • Condiments
    • Confections
    • Dairy Products
    • Grains/Cereals
    • Meat/Poultry
    • Produce
    • Seafood

    Load On Demand RadTreeView with Load On Demand RadToolTip

    A common scenario is to display rich tooltips for treeview nodes. Here is how to achieve that using RadToolTipManager and RadTreeView. The example shows two independent approaches to obtain the same end result. Approach #1 associates treeview nodes with the RadToolTipManager on the server by adding those to the RadToolTipManager's TargetControls collection. Since RadTreeView nodes do not have ID attribute set by default, this should be added to their Attributes collection. Approach #2 relies on the client-side API of RadToolTipManager. For each treenode an onmouseover handler is attached that will create and show a tooltip for that particular node. The tooltips' content is loaded on demand through an AJAX call.

    RadTreeView1 treeview is tooltipified by adding target controls on the server and RadTreeView2 treeview is tooltipified using the RadToolTipManager client-side API. The tooptips are targeting both second level treeview nodes.
    • DefaultCS.aspx
    • ProductDetails.ascx
    • DefaultCS.aspx.cs
      • DefaultCS.aspx.cs
      • ProductDetails.ascx.cs
    • scripts.js
    • Styles.css
    <%@ Page Language="c#" EnableViewStateMac="false" ViewStateEncryptionMode="Never"CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ToolTipTreeview.DefaultCS" %>
     
    <%@ Register Src="ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
    <!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:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="telerikDemo.closeActiveToolTip">
            <div class="demo-container size-wide no-bg">
                <table width="100%" class="tableClass">
                    <tr>
                        <td>
                            <telerik:RadToolTipManager RenderMode="Lightweight" Width="230px" Height="270px" RelativeTo="Element" ID="RadToolTipManager1"
                                                       runat="server" OffsetX="15" Skin="Telerik" Position="MiddleRight" EnableShadow="true"
                                                       OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate">
                            </telerik:RadToolTipManager>
                            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" Skin="Telerik" runat="server" OnNodeExpand="RadTreeView_NodeExpand">
                            </telerik:RadTreeView>
                        </td>
                        <td>
                            <telerik:RadToolTipManager RenderMode="Lightweight" Width="230px" Skin="Sunset" Height="270px" HideDelay="1"
                                                       RelativeTo="Element" ID="RadToolTipManager2" runat="server" EnableShadow="true"
                                                       OffsetX="15" Position="MiddleRight" OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate">
                            </telerik:RadToolTipManager>
                            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" Skin="Sunset" runat="server" OnNodeExpand="RadTreeView_NodeExpand"
                                                 OnClientMouseOver="telerikDemo.onClientMouseOver">
                            </telerik:RadTreeView>
                        </td>
                    </tr>
                </table>
            </div>
            <telerik:RadCodeBlock runat="server">
                <script type="text/javascript">
                    //<![CDATA[
                    serverID("tooltipManagerID", "<%= RadToolTipManager2.ClientID%>");
                    //]]>
                </script>
            </telerik:RadCodeBlock>
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance