RadGrid for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

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.

Move the mouse over a product name to see more details about it:

Tooltipified RadGrid

Note

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.

Here is a complete source code sample:

ASPX:

CopyASPX
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadGrid1">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="ManualClose"
  Width="250" Height="350" runat="server" EnableShadow="true" OnAjaxUpdate="OnAjaxUpdate"
  RelativeTo="Element" Position="MiddleRight">
</telerik:RadToolTipManager>
<telerik:RadGrid ID="RadGrid1" Width="550" 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>
  </MasterTableView></telerik:RadGrid><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>
CopyASCX
<table runat="server" style="width: 100%" id="ProductWrapper" border="0" cellpadding="2"
  cellspacing="0">
  <tr>
    <td style="text-align: center;">
      <asp:FormView ID="ProductsView" DataSourceID="ProductDataSource" DataKeyNames="ProductID"
        runat="server" OnDataBound="ProductsView_DataBound">
        <ItemTemplate>
          <asp:Label CssClass="title" ID="Category" runat="server"><%# Eval("ProductName")%></asp:Label>
          <hr />
          <asp:Image ID="image" Width="200" Height="200" runat="server" ImageUrl='<%# Eval("ProductID", "../../../Img/Northwind/Products/{0}.jpg") %>' />
          <br />
          <span class='title'>Quantity Per Unit:</span>
          <asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("QuantityPerUnit")%></asp:Label>
          <br />
          <span class='title'>Unit Price:</span>
          <asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("UnitPrice")%></asp:Label>
          <br />
          <span class='title'>Units In Stock:</span>
          <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("UnitsInStock")%></asp:Label>
          <br />
          <span class='title'>Units On Order:</span>
          <asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("UnitsOnOrder")%></asp:Label>
        </ItemTemplate>
      </asp:FormView>
    </td>
  </tr>
</table>
<asp:SqlDataSource ID="ProductDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
  ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Products] WHERE ([ProductID] = @ProductID)">
  <SelectParameters>
    <asp:Parameter Name="ProductID" Type="Int32" />
  </SelectParameters>
</asp:SqlDataSource>