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

Cache Loaded Data

Load content through a WebService

Load content through AJAX

  • Demo Configurator
  • General settings

Since Q2 2012 the RadToolTipManager offers a new property - EnableDataCaching . It defaults to false to preserve the old behavior - a request is made for the content each time a tooltip is shown, including subsequent showings of the same tooltip.

When EnableDataCaching is set to true caching is enabled and only one request will be performed for each target, regardless of how many times the same tooltip will be shown.

This can be useful in scenarios where the content that is loaded will not change over time, e.g. static details about a product. This allows the initial page load to be quick, because all the data for the tooltips will not be retrieved at this point, yet in the same time prevents excessive requests for the same data which can reduce the server load.

Important: when data caching is enabled only simple HTML content is supported for the tooltips. This means that controls that rely on postbacks and Telerik UI controls cannot be put in the content. There are several reasons for this:

  • The instance of the loaded user control on the server is the last one that was requested. Therefore postbacks should not occur inside because they may be coming from a tooltip that is cached, so the data on the server will no longer match what the tooltip will expect. Should updates be necessary - caching can be disabled through JavaScript so requests start anew: tooltipTipManagerReference.set_enableDataCaching(false); can be used.
  • Only the HTML string of the content is preserved (i.e. cached), so all event handlers and ScriptControl instances are going to be lost. The next time this HTML string is shown the styling may appear correctly but the Telerik controls (or any script controls) will not work (e.g. a RadRotator will not rotate even on click of its buttons).

Hover over the same image again to see the difference when data caching is enabled - the timestamp at the top of the tooltip will not change over time.
  • DefaultCS.aspx
  • CustomerInfoCS.ascx
    • CustomerInfoCS.ascx
    • CustomerInfoWSCS.ascx
  • CustomerInfoCS.ascx.cs
    • CustomerInfoCS.ascx.cs
    • CustomerInfoWSCS.ascx.cs
    • DefaultCS.aspx.cs
    • ToolTipWebService.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.EnableDataCaching.DefaultCS" %>

<%@ Register Src="CustomerInfoCS.ascx" TagName="CustomerInfo" TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</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" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager2" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Position="BottomCenter"
            Animation="Fade" Width="430px" Height="250px" RelativeTo="Element" HideEvent="ManualClose" EnableDataCaching="true">
            <WebServiceSettings Method="GetToolTipDataLabel" Path="ToolTipWebService.asmx"></WebServiceSettings>
        </telerik:RadToolTipManager>
        <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager2" runat="server" Position="BottomCenter"
            Width="430px" Height="250px" RelativeTo="Element" OnAjaxUpdate="OnAjaxUpdate" HideEvent="ManualClose" EnableDataCaching="true">
        </telerik:RadToolTipManager>
        <h2>Load content through a WebService</h2>
        <div style="background: url('Images/main_back.png') no-repeat; padding: 26px;">
            <div class="inner">
                <asp:Repeater runat="server" ID="itemsRepeater1" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
                    <ItemTemplate>
                        <div style="float: left" id="smallImage" runat="server">
                            <div class="imageContainer" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <asp:Label runat="server" ID="InfoLabel" Visible="false"></asp:Label>
        </div>
    </div>
    <div class="demo-container no-bg">
        <h2>Load content through AJAX</h2>
        <div style="background: url('Images/main_back.png') no-repeat; padding: 26px;">
            <div class="inner">
                <asp:Repeater runat="server" ID="itemsRepeater2" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
                    <ItemTemplate>
                        <div style="float: left" id="smallImage" runat="server">
                            <div class="imageContainer" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <asp:Label runat="server" ID="Label1" Visible="false"></asp:Label>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID FROM [Customers] 
            WHERE Country = 'Austria' OR Country = 'Belgium' OR 
            Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland' OR Country = 'Mexico'
            "></asp:SqlDataSource>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View Title="General settings">
                <qsf:ConfiguratorColumn runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Value="false">EnableDataCaching = "false" (default for RadToolTip)</asp:ListItem>
                                <asp:ListItem Value="true" Selected="True">EnableDataCaching = "true"</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance