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

Complex Tooltip Data Without Additional Requests

Product Image
Quantity per unit:
Units in stock:
Contact information:

Phone:
Country:
ProductSupplierUnit Price 
Page size:
10
Côte de BlayeAux joyeux ecclésiastiques$263.50
Thüringer RostbratwurstPlutzer Lebensmittelgroßmärkte AG$123.79
Mishi Kobe NikuTokyo Traders$97.00
Sir Rodney's MarmaladeSpecialty Biscuits, Ltd.$81.00
Carnarvon TigersPavlova, Ltd.$62.50
Raclette CourdavaultGai pâturage$55.00
Manjimup Dried ApplesG'day, Mate$53.00
Tarte au sucreForêts d'érables$49.30
Ipoh CoffeeLeka Trading$46.00
Rössle SauerkrautPlutzer Lebensmittelgroßmärkte AG$45.60

This demo explains how the tooltips can show data from the datasource without actually performing an AJAX request or calling a WebService each time one is shown which can ultimately increase the server performance.

The main concept is to add targets for the RadToolTipManager so that the tooltipified elements can be configured precisely, but instead of configuring a LOD scenario the necessary information can be sent to the client in the Value property for each target. This information can be obtained on the server, for example from the same datasource. Then, a simple JavaScript function attached to the OnClientShow event can take the data and put it in the tooltip. In the demo a simple HTML structure is used as a template to create a more appealing presentation and reduce the JavaScript that is needed.

In this demo data from the grid's datasource is concatenated for each tooltip, but the general case is to just get a string, e.g. a localized hint related to a button on the page.

This logic is suitable for data that will not change much over time and not all of it is necessary in the main view of the page. The approach is similar to the Data Caching mechanism, but avoids the tooltips' requests to the server at all (except the ones for the images, of course, but they are simple GET requests and not postbacks).

NOTE: The data must serialize in a JSON string, so the developer must make sure to escape it properly, otherwise the page may break. For example, \n, \r (or vbLf and vbCr in VB), apostrophes, quotes should be escaped in order work well with JavaScript. The HttpUtility.UrlEncodeUnicode method can be used (although marked as obsolete in .NET 4.5) because it can be decrypted easily on the client with decodeURIComponent while UrlEncode replaces spaces with plus signs.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.DatabaseTooltipsWithoutLOD.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.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="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" OnClientBeforeShow="telerikDemo.createContent" HideEvent="ManualClose"
        Width="250" Height="375" runat="server" RelativeTo="Element" Position="MiddleLeft"
        OffsetX="8" ShowDelay="200">
    </telerik:RadToolTipManager>
    <script type="text/javascript">

    </script>
    <div style="display: none;">
        <div id="ttipContent" class="ttContent">
            <span id="productHolder"></span>
            <img id="productImage" alt="Product Image" src="" />
            <br />
            Quantity per unit: <span id="quantityHolder"></span>
            <br />
            Units in stock: <span id="stockHolder"></span>
            <br />
            Contact information:
            <br />
            <span id="contactHolder"></span>
            <br />
            Phone: <span id="cityHolder"></span>
            <br />
            Country: <span id="countryHolder"></span>
        </div>
    </div>
    <div class="demo-container size-narrow no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
            GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound" AllowPaging="true"
            AllowSorting="true" PageSize="10" OnItemCommand="RadGrid1_ItemCommand">
            <MasterTableView AutoGenerateColumns="false" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
                DataSourceID="SqlDataSource1" Dir="LTR" Frame="Border" TableLayout="Auto">
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="UnitPrice" SortOrder="Descending"></telerik:GridSortExpression>
                </SortExpressions>
                <Columns>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="ProductName" HeaderText="Product"
                        SortExpression="ProductName" UniqueName="ProductName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="CompanyName" HeaderText="Supplier"
                        SortExpression="CompanyName" UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="UnitPrice" DataFormatString="{0:C}"
                        HeaderText="Unit Price" SortExpression="UnitPrice">
                    </telerik:GridBoundColumn>
                </Columns>
                <PagerStyle PageSizeControlType="RadDropDownList" PageButtonCount="5" ShowPagerText="false" />
            </MasterTableView>
            <ClientSettings EnableRowHoverStyle="true">
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName], [CompanyName], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [ContactName], [ContactTitle], [Phone], [Country] FROM [Products] INNER JOIN [Suppliers] ON Products.SupplierID=Suppliers.SupplierID "></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance