RadToolTipManager not working with paging in RadGrid

[vincent]

I have a RadGrid and a RadToolTipManager.  On mouseover of the a link, I call a webservice to display a tooltip.

Everything works flawlessly on the first page.  However, when I go to page two of my radgrid, all the tooltips correspond to page 1.  No matter what page in my grid I go to, the tooltips all correspond to the items on page one. 

Any help is appreciated!

Thanks.

[Svetlina Anati]

Hi Vincent,

When you change the RadGrid's page, you actually display new records which have different target control ID. In order to achieve the desired behavior, you should update the RadToolTipManager's TargetControls collection. I assume that in your case the RadToolTipManager stays with the old values when the page is changed.

One possible solution is to clear the TargetControls collection in the RadGrid's PageIndexChanged event handler by adding the following code:

  protected void RadGrid1_PageIndexChanged(object source, GridPageChangedEventArgs e)
    {
        RadToolTipManager1.TargetControls.Clear();
    }

In case this does not help, please prepare a sample, fully runnable reproduction project (including DB, if needed), open a new support ticket and send it to me. Once I receive it, I will modify it in order to meet your requirements.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[vincent]

Thank you for the quick response.  I have tried adding RadToolTipManager1.TargetControls.Clear(); to several events such as Page_Load and OnPageIndexChanged. 

I have traced through before and after the call to Clear(); and it seems like everything looks fine. The new IDs are being adding to the TargetControls.  However, I still have the same problem. 

When I do a view source on the HTML, all the old HTML is there.  But the browser displays all new data in the RadGrid.

Any idea?

Thanks again.

[Svetlina Anati]

Hello Vincent,

Since I do not have your code I am not able to tell what causes the problem.

I prepared a sample, working demo which shows how you can tooltipify a RadGrid which has its paging turned on.

In case this does not help you solve the problem, please open a new support ticket and send me a reproduction demo, which is fully runnable. Once I receive it, I will do my best to help you.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[vincent]

Svetlina,

Unfortunately the sample code does not work.  My code was almost identical.  Sending you the code would be very difficult since we are working in a DNN environment.

I just wanted to thank you for your responsiveness.  You have gone above and beyond in helping me with this issue. 

Vince.

[Svetlina Anati]

Hi Vincent,

It is very strange that the provided demo did not work on your side - I tested it again and it works as expected as you can see from the attached video capture.

It is not needed to send me your original project - most probably the problem will be reproduced if you modify the attached project in order to replicate the code which you originally use. Please, try to replicate your logic in the project I previously attached and in case you succeed, open a new support ticket and send it back to me.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Craig Hinkel]

I have the exact problem as Vincent.  I'm using the Q2 2008 version. 
I'll monitor the grid's databound event and see that the TargetControls is clear to upon each page index change.  The control id passed in is the same for each page, but the argument value is different.  When On Ajax Update fires, the value from the original page is in the ToolTipUpdateEventArgs.Value property.

I tried your example in my dnn environement and had the same failed result.  Any help is greatly appreciated.

[Svetlina Anati]

Hi Craig,

Would you please examine the attached demo which contains a tooltipified, ajaxified RadGrid with its paging and sorting enabled? Please, replicate the same logic in your project and in case you experience problems, modify it in order to reproduce them, open a new support ticket and send it to me.


Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Laura]

I also am using a radgrid with a column getting a tooltip using teh radtooltipmanager. I used the load on demand demo to implement my tooltip, and it appears it is the same as the sample you are providing here. I also have the problem of only the first page working. When I go to subsequent pages, the first page's tooltip is showing. The content inside my tooltip is a grid of a detail table of the item I am hovering on. On the first page, the detail items are correct. I am not rebinding the detail table in the updatetooltip function since I did not know how to find it. I think that is my problem. How would I find the grid that is in the control the I got from the ascx page?

Here is my code: ASPX:

   <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
    <div>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="okButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="okButton" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

    </div>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
        DataSourceID="SqlDataSource1" GridLines="None" PageSize="20"
        OnItemDataBound="RadGrid1_ItemDataBound"
        onpageindexchanged="RadGrid1_PageIndexChanged"
        onitemcommand="RadGrid1_ItemCommand" >
         <GroupingSettings CaseSensitive="false" />
      <MasterTableView AutoGenerateColumns="False" DataKeyNames="provider_id"
            DataSourceID="SqlDataSource1" AllowSorting="True" PageSize="12"
             InsertItemPageIndexAction="ShowItemOnCurrentPage">
        <SortExpressions>
          <telerik:GridSortExpression FieldName="provider_name" SortOrder="Ascending" />
        </SortExpressions>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
        <Columns>
          <telerik:GridBoundColumn DataField="provider_id" DataType="System.Int32"
              ReadOnly="True" SortExpression="provider_id"  display="false"
              UniqueName="provider_id">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="provider_name" HeaderText="Provider Name"
            SortExpression="provider_name" UniqueName="provider_name">
          </telerik:GridBoundColumn>

          <telerik:GridTemplateColumn DataField="provider_alias" HeaderText="Primary Provider Alias" SortExpression="provider_alias"
                                    UniqueName="provider_alias">
                                    <ItemTemplate>&nbsp;
                                        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.provider_alias") %>'>
                                        </asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
          <telerik:GridBoundColumn DataField="provider_alias" HeaderText="Primary Provider Alias"
            SortExpression="provider_alias" UniqueName="provider_alias"
                AllowFiltering="false">
          </telerik:GridBoundColumn>
    </Columns>
          <PagerStyle Mode="NextPrevAndNumeric" />
          <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
              Font-Strikeout="False" Font-Underline="False" VerticalAlign="Bottom"
              Wrap="True" />
</MasterTableView>

       <ClientSettings>
         <ClientEvents  OnRowSelected="rowSelected" />
         <Selecting AllowRowSelect="True" />
        </ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
    </telerik:RadGrid>




     <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="Center"
            RelativeTo="Element" Width="320px" Height="260px" Animation="Resize"
            HideEvent="LeaveToolTip" Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate">
 </telerik:RadToolTipManager>

ASCX:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="aliasGridInToolTip.ascx.cs" Inherits="aliasGridInToolTip" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<telerik:RadGrid ID="aliasGrid" runat="server" GridLines="None"
        DataSourceID="ccAlias" AutoGenerateColumns="False">
          <MasterTableView NoMasterRecordsText="No aliases to display">
            <Columns>
              <telerik:GridBoundColumn DataField="alias_name" HeaderText="All Aliases"></telerik:GridBoundColumn>
           </Columns>
        </MasterTableView>
</telerik:RadGrid>

C#:

 public partial class chooseVendorGrid : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }


        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            Label Label1 = (Label)e.Item.FindControl("Label1");

            //Add the Label id to the tooltip manager
            try
            {
                System.Data.DataRowView currentRow = (System.Data.DataRowView)e.Item.DataItem;
                this.RadToolTipManager1.TargetControls.Add(Label1.ClientID, currentRow.Row["provider_id"].ToString(), true);
            }
            catch (Exception e1)
            {
            }



        }
        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.updateToolTip(args.Value, args.UpdatePanel);
        }
#if y
        protected void updateToolTip(string elementID, UpdatePanel panel)
        {
            //Add the pnlToolTipContainer panel to the updatepanel, and make the test informationlabel visibility to true
            panel.ContentTemplateContainer.Controls.Add(pnlToolTipContainer);
            lblInfo.Visible = true;
            lblInfo.Text = elementID;

            toolTipProviderID.Text = elementID; // puts the current row's providerID in textbox to bind aliasGrid to that providerID
            aliasGrid.Rebind();

        }


        protected void updateToolTip1(string elementID, UpdatePanel panel)
        {
            toolTipProviderID.Text = elementID; // puts the current row's providerID in textbox to bind aliasGrid to that providerID
            aliasGrid.Rebind();
            panel.ContentTemplateContainer.Controls.Add(aliasGrid);
            aliasGrid.Rebind();
        }
#endif
        protected void updateToolTip(string elementID, UpdatePanel panel)
        {

            toolTipProviderID.Text = elementID;
            Control ctrl = Page.LoadControl("aliasGridInToolTip.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
     //     RadGrid grid = (RadGrid)ctrl;
       //   grid.Rebind();

        }

        protected void RadGrid1_PageIndexChanged(object source, GridPageChangedEventArgs e)
        {

        RadToolTipManager1.TargetControls.Clear();

        }

        protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
        {

            if (e.CommandName == "Sort" || e.CommandName == "Page")
            {
                RadToolTipManager1.TargetControls.Clear();
            }



        }

    }

[Svetlina Anati]

Hello Laura,

As already explained, when you update the grid you should also update the RadToolTipManager. Would you please add the needed setting to the RadAjaxManager as shown below and test again?

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="okButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="okButton" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jonathan]

I'm experiencing the same issue in my app as well, however I experience it whenever I expand/collpase a hierarchy in the grid. I did add your suggested code to my Page_Load() handler since I'm creating the grid programmatically. See code below:

        protected void Page_Load(object sender, EventArgs e)
        {
            RadGrid grid1 = (RadGrid)PlaceHolder1.FindControl("grid1");
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid1, grid1);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid1, RadToolTipManager1);

        }

What else am I missing. The tooltips work when the page loads the first time, however it's as though the onmouseover events on the client side aren't being registered again when the page posts-back.

Thanks,

[Jonathan]

Ok, I was able to solve my issue... I needed to make sure that I was adding the control to the targetcontrols collection during the databinding event and not during the page_init event. The tooltips are working now.

[nilesh]

Hello,

i have used radGrid and Radtooltipmanager. i have column in grid where i add dynamic hyperlinks and which i have added to the RadToolTipManager as targetcontrols. And as your example given in loadondemand for ToolTip; i have show tooltips OnAjaxUpdate event. where i load a .ascx control. In this .ascx control i show information in textboxes, radiobuttons etc. For first time it shows extact data.....but when i click on other row link of my grid it shows same information...in tooltips which is shown for first time. 
             
                I have checked with breakpoints  .ascx control gets extact id which is selected from that grid row. Information is also loaded but not shown on frontend, means in textboxes etc.

Thanks.

[Stuart Hemming]

Nilesh,

Sounds like you're not clearing the TargetControls collection on paging. Have a look this demo article. In particular, pay attention to the RadGrid1_ItemCommand and RadGrid1_ItemDataBound event handlers.

Hope this helps.

--
Stuart

[nilesh]

Hello Stuart sir,

      i have tried all the solutions given in this forum's previous comments, like you have suggested to clear the target controls collection. And my problem is not related to paging....on same page of grid it doesn't shows different tooltips for each different row or record in grid.

thanks.

[Svetlina Anati]

Hi guys,

I suggest to examine the following online demo which shows a tooltipified grid with paging enabled:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx

Please, examine the full source code of the demo which is installed on your local disk automatically by the RadControls installer and replicate the same logic in your applications.

In case you need further assistance, prepare a sample, fully runnable reproduction demo (use Northwind or a fake programmatic datasource for the grid), open a new support ticket and send it to us along with detailed explanations of the actual and the desired behavior and we will do our best to help.



Greetings,
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.

[Richard]

I'm having a similiar issue. I followed the demo pretty much exactly but the issue is that
the tooltips are NOT being cleared on the CLIENT side. I can debug and see them being cleared
from the TargetControls collection but they still persist on the cilent side. How do you clear the tooltips on the client side?

This is what I have for in my ASPX page according to the demo:

 

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
 
<AjaxSettings>
 
<telerik:AjaxSetting AjaxControlID="InventoryGrid">
 
<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="InventoryGrid" />
 
<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
 
</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>
 </telerik:RadAjaxManagerProxy>

 

 

[Svetlina Anati]

Hello Richard,

Actually, the tooltip client objects are disposed in the scenario you describe and all the handlers and references have been cleared and no memmory leaks occur. The only thing which is not cleared is the HTML of the tooltips and this should be handled by the browser and it is so when a plain postback is performed - the HTML is not cleared only in case of an AJAX request.

However, just clearing the HTML in such cases could cause some serious problems in some scenarios and this is worse than having a little more HTML on your page, furthermore it is obnly plain HTML, all the client objects and handlers are cleared as already explained. If you want you can clear the HTML yourself or we can provide you with some code about this but we strongly recommend to keep the things the way they are.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ashish Jain]

HI Svetlina,

Can you provide me the source code as i have to same problem as Richard. I am stuck in middle reply me as soon as possible.

thanks,
Ashi

[Devanand Dontikurti]

Hi Veli,

I am also using the similar code and everything is working fine. But the horizental scroll bar is disappearing on my Grid, when I open the tooltip from a link button. How can I prevent that? I have some 70 columns on my grid. ToolTip column is at right most of the grid.
I have attached the screen shot for the same. My code for aspx page is below..

   <telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="ManualClose"
                Width="250" Height="250" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
                Position="MiddleRight">
            </telerik:RadToolTipManager>
                   <telerik:RadGrid  ID="RadGrid1" runat="server" AllowPaging="True"
                    EmptyDataText="--------------No Data Found for the above search criteria.----------------"
                      OnNeedDataSource="RadGrid1_NeedDataSource"
                       OnInit="RadGrid1_Init"
                       OnItemDataBound="RadGrid1_ItemDataBound"
                       OnItemCommand="RadGrid1_ItemCommand"
                       OnItemCreated="RadGrid1_ItemCreated"
                       OnPageIndexChanged="RadGrid1_PageIndexChanged"
                       PageSize="15"
                       AutoGenerateColumns="False"  BorderStyle="Solid"
                       HorizontalAlign="Left"
                       DataKeyNames="Schedule_ID" AllowFilteringByColumn="True"
                       AllowSorting="True"
                       AllowScrolling="True"
                       Skin="Outlook"
                       CssClass="radgrid"
                       ShowStatusBar="True"
                       style = "Z-Index:auto; width:941px; Height:600Px; overflow:hidden; position:relative;"
                       BorderColor="#0066FF" EnableViewState="False" GridLines="None"  >
                       <HeaderStyle Width="125px" Wrap="False" />
                       <GroupingSettings CaseSensitive="False" />

                      <ClientSettings EnableRowHoverStyle="True" AllowKeyboardNavigation="true" EnablePostBackOnRowClick="false">
                            <Scrolling AllowScroll="True"  UseStaticHeaders="True" FrozenColumnsCount="3">
                            </Scrolling>
                            <Selecting AllowRowSelect="False" />
                      </ClientSettings>

                      <SortingSettings SortedBackColor="BurlyWood" />
                      <exportsettings filename="Full_OutPut"
                           OpenInNewWindow="True" ExportOnlyData="True" IgnorePaging="True" Excel-Format="Html">
                            <Excel Format="Html"></Excel>
                      </exportsettings>
                       <ItemStyle Width="122px" Wrap="False" />
                      <PagerStyle AlwaysVisible="True" HorizontalAlign="Left"
                           Mode="NextPrevNumericAndAdvanced" />

              <MasterTableView TableLayout="Fixed" EditMode="InPlace" EnableViewState="False"
                           AlternatingItemStyle-Wrap="False" HeaderStyle-Wrap="False"
                           ItemStyle-Wrap="False" PagerStyle-Wrap="False" AllowCustomPaging="False"
                           AllowFilteringByColumn="True" datakeynames="Schedule_Id"  Width="100%"
                           CurrentResetPageIndexAction="SetPageIndexToFirst"
                          >
               <HeaderStyle />
              <ItemStyle Wrap="False"></ItemStyle>
                <AlternatingItemStyle Wrap="False"></AlternatingItemStyle>
              <EditItemStyle Wrap="False"></EditItemStyle>
              <PagerStyle Mode="NextPrevAndNumeric" />

            <ExpandCollapseColumn Visible="True"></ExpandCollapseColumn>
               <Columns>
 <telerik:GridBoundColumn DataField="Well_Name" HeaderText="Well Name"
                        CurrentFilterFunction="Contains" UniqueName="Well_Name">
                       <FooterStyle Wrap="False" Width="140px" />
                       <HeaderStyle Width="140px" />
                       <ItemStyle Wrap="False" Width="140px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Property_Number"
                        HeaderText="Property No"
                        CurrentFilterFunction="Contains"  UniqueName="Property_Number">
                        <FooterStyle Wrap="False" Width="125px" />
                        <HeaderStyle Width="125px" Wrap="False" />
                        <ItemStyle Wrap="False" Width="125px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LandMan" HeaderText="LandMan" ReadOnly="true" UniqueName="LandMan">
                        <FooterStyle Width="125px" />
                        <HeaderStyle Width="125px" />
                        <ItemStyle Width="125px" />
                    </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Challenge_Well" HeaderText="Challenge_Well"
                        ReadOnly="true" AllowFiltering="False"  HeaderStyle-Width="100px">
                        <FooterStyle  Width="100px" />
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle  Wrap="False" Width="100px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="AFE" HeaderText="AFE_Remarks"
                        ReadOnly="true" AllowFiltering="False"  HeaderStyle-Width="125px">
                        <FooterStyle  Width="100px" />
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle  Wrap="False" Width="100px" />
                    </telerik:GridBoundColumn>
                     <telerik:GridBoundColumn DataField="GEN" HeaderText="General_Remarks"
                        ReadOnly="true" AllowFiltering="False"  HeaderStyle-Width="125px">
                        <FooterStyle  Width="100px" />
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle  Wrap="False" Width="100px" />
                    </telerik:GridBoundColumn>
                     <telerik:GridBoundColumn DataField="LAN" HeaderText="LandMand_Remarks"
                        ReadOnly="true" AllowFiltering="False"  HeaderStyle-Width="125px">
                        <FooterStyle  Width="100px" />
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle  Wrap="False" Width="100px" />
                    </telerik:GridBoundColumn>
                     <telerik:GridBoundColumn DataField="CHA" HeaderText="Challenge_Remarks"
                        ReadOnly="true" AllowFiltering="False"  HeaderStyle-Width="125px">
                        <FooterStyle  Width="100px" />
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle  Wrap="False" Width="100px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn  UniqueName="Schedule_Id" HeaderText="Remarks" AllowFiltering="False"  HeaderStyle-Width="80px">
                            <ItemTemplate>
                                   <asp:HyperLink ID="targetControl" NavigateUrl="#" runat="server" Text="..." CommandArgument='<%#Eval("Schedule_Id") + "|"+Eval("Well_Name") %>'></asp:HyperLink>
                            </ItemTemplate>
                    </telerik:GridTemplateColumn>

                   </Columns>

                </MasterTableView>

                </telerik:RadGrid>

Thanks
Devanand

[Svetlina Anati]

Hi Devanand,

As far as I understand you want the tooltip to be exactly as big as you have set and if the content is bigger - scrollbars to be generated. If so, you should set ContentScrolling="Auto" as shown below:

<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="ManualClose"
               Width="250" Height="250" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
               Position="MiddleRight" ContentScrolling="Auto">

Let me know whether this si what you need, otherwise, please provide more detailed explanations and a screenshot with teh problem clearly marked and I will do my best to help.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.