Sorting grid doesn't reset TargetControls

[Software]

I've been using this article as a guide to implement mouseover "details" tooltips in my RadGrid.  The result has been great - in general it works beautifully.  There are, however, a couple issues that I could use some help with:

1. If the user sorts the RadGrid, it should clear the TargetControls property of the RadToolTipManager and re-populate that with the new values for each target control.  That doesn't happen.  I'v implemented the code mentioned in the article in my ItemCommand and ItemDataBound but after a sort the value for each TargetControl is still the old one.
2. I've tried changing the Skin value of the RadTooltipManager, but it doesn't seem to make any difference.  Any idea what I might be missing?
3. I'd like to move the "Close" button to the left side of the tooltip, is there a way to control it's position, or anything else about the close button?

Here is the code I'm using:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Sort" || e.CommandName == "Page")
        RadToolTipManager1.TargetControls.Clear();
}

protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{
    UpdateToolTip(args.Value, args.UpdatePanel);
}

private void UpdateToolTip(string elementID, UpdatePanel panel)
{
    var ctrl = Page.LoadControl("~/usercontrols/PersonSummary.ascx");
    panel.ContentTemplateContainer.Controls.Add(ctrl);
    var details = (PersonSummary)ctrl;
    details.xref = elementID;
}

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item.ItemType != GridItemType.Item && e.Item.ItemType != GridItemType.AlternatingItem) return;
    var target = e.Item.FindControl("targetControl");
    if (!Equals(target, null))
        if (!Equals(RadToolTipManager1, null))
        {
            var currentRow = e.Item as GridDataItem;
            if (currentRow != null)
                RadToolTipManager1.TargetControls.Add(target.ClientID, currentRow["colXref"].Text, true);
        }
}

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1" EventName="Sort">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="loadingPnl" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipMgr" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="imgBtnExportExcel" EventName="Click">
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="0" ShowCallout="true"
    OffsetX="-30" HideEvent="LeaveToolTip" ShowEvent="OnMouseOver"
    Width="560" Height="150" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
    Position="MiddleRight" ManualClose="true" Modal="false" Sticky="true" Animation="None"
    ContentScrolling="Auto" Skin="WebBlue" EnableTheming="true">
</telerik:RadToolTipManager>

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" runat="server" AllowSorting="True"
    OnItemCommand="RadGrid1_ItemCommand"
    OnItemDataBound="RadGrid_ItemDataBound"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnDataBound="rgResults_DataBound">
    <MasterTableView DataKeyNames="Xref" ClientDataKeyNames="Xref" ShowHeadersWhenNoRecords="false"
        AllowMultiColumnSorting="true" VirtualItemCount="100">
            <telerik:GridTemplateColumn HeaderText="NAME" SortExpression="LastName"
                UniqueName="colName" HeaderStyle-CssClass="gvHeaderName" ItemStyle-CssClass="gvItemName">
                <ItemTemplate>
                    <asp:HyperLink ID="targetControl" runat="server"
                        NavigateUrl="#"
                        Text='<%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %>'></asp:HyperLink>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
    </MasterTableView>
</telerik:RadGrid>

Obviously I removed a lot of extraneous code to focus on just the bits that pertain to this question...
Thanks for the help!

Eddie

[Svetlina Anati]

Hi Eddie,

I already answred your other thread and for your convenience I pasted my reply below:

Straight to your questions:

1. Your setting are correct and you have correctly ajaxified the RadTooltipManager along with the RadGrid. However, I noticed that you have ajaxified a RadToolTipManager with ID RadToolTipMgr while the manager which tooltipifies the grid is called RadToolTipManager1. This being said, you should modify your code in the following manner:
   
   

   <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="RadGrid1" EventName="Sort">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="loadingPnl" />
                   <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
           <telerik:AjaxSetting AjaxControlID="imgBtnExportExcel" EventName="Click">
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManagerProxy>
   

2. I was not able to reproduce the described skin problem - the skin is correctly applied. I attached my test demo to the other thread - please modify it in order to reproduce the problem and send it back to me along with screenshots of the actual and the desired appearance.
3. In order to move the Close button to the left you should override the default seeting as shown below:
   
   

     <style type="text/css">
       .CloseButton
       {
          float: left !important;
       }
       </style>

 

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.