ToolTip - Update TargetControls with AJAX

ProductSupplierPrice
Page size:
10
1 Chai Exotic Liquids$18.00
2 Chang Exotic Liquids$19.00
3 Aniseed Syrup Exotic Liquids$10.00
4 Chef Anton's Cajun Seasoning New Orleans Cajun Delights$22.00
5 Chef Anton's Gumbo Mix New Orleans Cajun Delights$21.35
6 Grandma's Boysenberry Spread Grandma Kelly's Homestead$25.00
7 Uncle Bob's Organic Dried Pears Grandma Kelly's Homestead$30.00
8 Northwoods Cranberry Sauce Grandma Kelly's Homestead$40.00
9 Mishi Kobe Niku Tokyo Traders$97.00
10 Ikura Tokyo Traders$31.00
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

There are situations when the RadToolTipManager's TargetControls collection should be updated. This example shows a common scenario when this should be done - it contains a RadGrid which has its paging and sorting turned on. Every time a page is changed or the grid is sorted, it is updated through AJAX and the RadToolTipManager's TargetControls collection should get updated, too. In order to achieve this, both the grid and the RadToolTipManager are ajaxified by using a RadAjaxManager control.

Note, that when the page index is changed, or a sorting has been done, the RadToolTipManager's TargetControls collection is cleared because the records on the new grid's page have the same ClientIDs as the old ones.

Move the mouse over a product name to see more details about it
  • DefaultCS.aspx
  • ProductDetailsCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ProductDetailsCS.ascx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" EnableViewStateMac="false" ViewStateEncryptionMode="Never"Inherits="Telerik.Web.Examples.ToolTip.TargetControlsAndAjax.DefaultCS"  %>

<%@ Register Src="ProductDetailsCS.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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 runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <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" OffsetY="-1" HideEvent="ManualClose"
            Width="250" Height="350" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
            Position="MiddleRight">
        </telerik:RadToolTipManager>
        <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"
                DataKeyNames="ProductID" DataSourceID="SqlDataSource1" Dir="LTR" Frame="Border"
                TableLayout="Auto">
                <Columns>
                    <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductID" Display="false"
                        DataType="System.Int32" FilterListOptions="VaryByDataType" ForceExtractValue="None"
                        HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Product" SortExpression="ProductName">
                        <ItemTemplate>
                            <asp:HyperLink ID="targetControl" runat="server" NavigateUrl="#" Text='<%# Eval("ProductName") %>'></asp:HyperLink>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="CompanyName" HeaderText="Supplier"
                        SortExpression="CompanyName" UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="UnitPrice" DataFormatString="{0:C}"
                        HeaderText="Price" SortExpression="UnitPrice">
                    </telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
                    </EditColumn>
                </EditFormSettings>
                <PagerStyle PageSizeControlType="RadDropDownList" ShowPagerText="false" />
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Products] INNER JOIN [Suppliers] ON Products.SupplierID=Suppliers.SupplierID "></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?