TooltipManager does not work after RadGrid's Ajax request

[Mahesh Ramakrishnan]

I have an user control with a Grid and TooltipManager inside UpdatePanel. I add TargetControls on ItemDataBound of RadGrid and handle AjaxUpdate of the TooltipManager. TooltipManager works fine but before any Ajax Request to the Grid. Once I click "Refresh" command item (that fires RebindGrid) or on another external client-side AjaxRequest() call, I don't get the tooltip.

Here is the code

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <radG:RadGrid ID="WorkItemsGrid" runat="server" AllowSorting="True"
            AutoGenerateColumns="False" DataSourceID="WorkItemsObjectDataSource" EnableAJAX="True" EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="50"
            GridLines="None" AllowMultiRowSelection="True" Width="100%" OnItemCommand="WorkItemsGrid_ItemCommand" OnItemDataBound="WorkItemsGrid_ItemDataBound">
            <ClientSettings>
                <Selecting AllowRowSelect="True" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="200px" />
                <ClientEvents OnGridCreated="GridCreated" />
            </ClientSettings>
            <MasterTableView DataSourceID="WorkItemsObjectDataSource" CommandItemDisplay="Top" DataKeyNames="RequestID"
                NoMasterRecordsText="No Work Items available.">
                <SortExpressions>
                    <radG:GridSortExpression FieldName="SubmittedOn" SortOrder="ascending" />
                </SortExpressions>
                <CommandItemStyle HorizontalAlign="Right" />
                <CommandItemTemplate>
                    <asp:LinkButton ID="WorkItemsRefreshButton" runat="server" CommandName="RebindGrid"><img style="border:0px" alt="" src="~/Images/Refresh.gif" runat="server" /> Refresh </asp:LinkButton>
                    <asp:LinkButton ID="ReleaseRequestButton" runat="server" CommandName="ReleaseRequest"><img style="border:0px" alt="" src="~/Images/cancel.gif" runat="server" />Release</asp:LinkButton>&nbsp;
                </CommandItemTemplate>
                <Columns>
                    <radG:GridButtonColumn DataTextField="RequestID" HeaderText="ReqID" UniqueName="RequestID" CommandName="ProcessRequest" ButtonType="LinkButton">
                        <ItemStyle Width="5%" />
                        <HeaderStyle Width="5%" />
                    </radG:GridButtonColumn>
                    <radG:GridButtonColumn DataTextField="ClientName" HeaderText="Client Name" UniqueName="ClientName" CommandName="ProcessRequest" ButtonType="LinkButton"  >
                        <ItemStyle Width="10%" />
                        <HeaderStyle Width="10%" />
                    </radG:GridButtonColumn>
                    <radG:GridBoundColumn AllowFiltering="False" DataField="ReqAttorney" Groupable="False"
                        HeaderText="Req Attorney" UniqueName="ReqAttorney">
                        <ItemStyle Width="10%"  />
                        <HeaderStyle Width="10%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="Requestor" HeaderText="Requestor" ReadOnly="True"
                        UniqueName="Requestor">
                        <ItemStyle Width="10%"  />
                        <HeaderStyle Width="10%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="ReqOffice" HeaderText="Office" ReadOnly="True" UniqueName="ReqOffice">
                        <ItemStyle Width="5%"  />
                        <HeaderStyle Width="5%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="ReqType" HeaderText="Request Type" UniqueName="ReqType">
                        <ItemStyle Width="15%"  />
                        <HeaderStyle Width="15%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="ReqStatus" HeaderText="Status" UniqueName="ReqStatus">
                        <ItemStyle Width="14%" />
                        <HeaderStyle Width="14%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="SubmittedOn" HeaderText="Submitted" ReadOnly="True"
                        UniqueName="SubmittedOn" DataFormatString="{0:g}">
                        <ItemStyle Width="14%"  />
                        <HeaderStyle Width="14%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="ClaimedOn" HeaderText="Claimed On" UniqueName="ClaimedOn"  DataFormatString="{0:g}">
                        <ItemStyle Width="14%" />
                        <HeaderStyle Width="14%" />
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="ClaimedBy" HeaderText="Claimed By" UniqueName="ClaimedBy" Visible="false">
                        <ItemStyle Width="10%" />
                        <HeaderStyle Width="10%" />
                    </radG:GridBoundColumn>
                    <radG:GridClientSelectColumn UniqueName="SelectRequest" >
                        <ItemStyle Width="3%" />
                        <HeaderStyle Width="3%" />
                    </radG:GridClientSelectColumn>
                </Columns>
                <ExpandCollapseColumn Visible="False">
                    <HeaderStyle Width="19px" />
                </ExpandCollapseColumn>
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
            </MasterTableView>
        </radG:RadGrid>
        <telerik:RadToolTipManager ID="AlertToolTipManager" runat="server" OnAjaxUpdate="AlertToolTipManager_OnAjaxUpdate" RelativeTo="Element" Height="100%" Skin="WebBlue" Animation="None" Position="MiddleRight" MouseTrailing="false" OffsetY="-20">
        </telerik:RadToolTipManager>
    </ContentTemplate>
</asp:UpdatePanel>

        protected void AlertToolTipManager_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            int index = args.TargetControlID.LastIndexOf("_");
            string reqID = args.TargetControlID.Substring(index + 1);

            Control ctrl = Page.LoadControl("~/Parts/AlertToolTip.ascx");
            args.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);

            AlertToolTip alert = (AlertToolTip)ctrl;
            alert.ReqID = int.Parse(reqID);
        }

        protected void WorkItemsGrid_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)
            {
                DataRowView requestRowView = e.Item.DataItem as DataRowView;
                if (requestRowView != null)
                {
                    int reqID = (int)requestRowView["RequestID"];
                    GridDataItem gridItem = e.Item as GridDataItem;
                    string controlID = "WorkReqAlert_" + reqID.ToString();
                    gridItem["ReqStatus"].Text += GetHTMLCodeForAlert(controlID,reqID);
                    ToolTipTargetControl target = new ToolTipTargetControl(controlID, true);
                    AlertToolTipManager.TargetControls.Add(target);
                }
          }
}

        private string GetHTMLCodeForAlert(string controlID,int reqID)
        {
            string dataFormatString = "<img id='" + controlID + "' src='../Images/Email_Read.gif'>";
            return dataFormatString;
        }

Thank you,
Mahesh

[Tsvetie]

Hello Mahesh Ramakrishnan,
We are aware of this issue - for the time being, the RadToolTip control does not work with the RadGrid ajax. That is why, just set EnableAJAX="False" for the RadGrid and you should get the desired behavior. As you have placed the RadGrid inside an UpdatePanel, you will still be making ajax requests.

Sincerely yours,
Tsvetie
the Telerik team

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

[Mahesh Ramakrishnan]

Thank you for quick response.

I just set EnableAJAX="False" in RadGrid. But I have two issues now,

1. It work fine before any AjaxRequest to the Grid ('RebindGrid' command through command item or external client-side call). On AjaxRequest I get a javascript exception 
    Sys.InvalidOperationException: Two components with the same id
    'ctl00_cphMain_WorkItemsQueueControl_AlertTooltipManager' cannot be added to the application.

This is the TooltipManager control.

Am I missing something?

2. The AjaxLoadingPanel of Grid doesn't appear. Is there a way to get that or any other loading panel on UpdatePanel's ajax requests?

Thank you,
Mahesh

[Tsvetie]

Hello Mahesh Ramakrishnan,

1. Please make sure that you are using the latest version of the Telerik.Web.UI suite. In case this does not fix the problem, we will need a simple running project with which we can reproduce the problem.
2. In this case, as you have set EnableAJAX="false", you have to use a separate RadAjaxLoadingPanel and manually open and close it, when you wish. For example, in case you want the panel to hide the RadGrid only when you are sorting, you can use the following script:

   <body>
       <form id="form1" runat="server">
           <asp:ScriptManager ID="ScriptManager1" runat="server" />
   
           <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Height="75px" Width="75px">
               <asp:Image ID="Image1" runat="server" AlternateText="Loading..." />
           </telerik:RadAjaxLoadingPanel>
   
           <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
               <ContentTemplate>
                   <radG:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None"
                       OnItemDataBound="RadGrid1_ItemDataBound" AllowSorting="True">
                       <MasterTableView AutoGenerateColumns="False" DataSourceID="AccessDataSource1">
                           <Columns>
                               <radG:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID"
                                   SortExpression="ProductID" UniqueName="ProductID">
                               </radG:GridBoundColumn>
                               <radG:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                                   UniqueName="ProductName">
                               </radG:GridBoundColumn>
                               <radG:GridTemplateColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName"
                                   UniqueName="CategoryName">
                                   <ItemTemplate>
                                       <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label>
                                   </ItemTemplate>
                                   <EditItemTemplate>
                                       <asp:TextBox ID="CategoryNameTextBox" runat="server" Text='<%# Bind("CategoryName") %>'></asp:TextBox>
                                   </EditItemTemplate>
                               </radG:GridTemplateColumn>
                           </Columns>
                           <ExpandCollapseColumn Visible="False">
                               <HeaderStyle Width="19px" />
                           </ExpandCollapseColumn>
                           <RowIndicatorColumn Visible="False">
                               <HeaderStyle Width="20px" />
                           </RowIndicatorColumn>
                       </MasterTableView>
                   </radG:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/Nwind.mdb"
                       SelectCommand="SELECT TOP 10 [ProductID], [ProductName], [CategoryName] FROM [Alphabetical List of Products]">
                   </asp:AccessDataSource>
                   <telerik:RadToolTipManager ID="AlertToolTipManager" runat="server" OnAjaxUpdate="AlertToolTipManager_OnAjaxUpdate"
                       RelativeTo="Element" Height="100%" Skin="WebBlue" Animation="None" Position="MiddleRight"
                       MouseTrailing="false" OffsetY="-20">
                   </telerik:RadToolTipManager>
               </ContentTemplate>
           </asp:UpdatePanel>
       </form>
       <script type="text/javascript">
   
       function HandleAjaxLoadingPanel()
       {
           var prm = Sys.WebForms.PageRequestManager.getInstance();
   
           prm.add_beginRequest(beginRequestHandler);
           prm.add_endRequest(endRequestHandler);
       }
   
       var currentLoadingPanel = null;
       var currentUpdatedControlId = null;
   
       function beginRequestHandler(sender, args)
       {
           var prm = Sys.WebForms.PageRequestManager.getInstance();
   
           if (args.get_postBackElement().id.indexOf('<%= RadGrid1.ClientID %>') != -1)
           {
               currentUpdatedControlId = '<%= RadGrid1.ClientID %>';
               currentLoadingPanel = window["<%= LoadingPanel1.ClientID %>"];
               currentLoadingPanel.Show(currentUpdatedControlId);
           }
       }
   
       function endRequestHandler(sender, args)
       {
           if (currentLoadingPanel != null)
           {
               currentLoadingPanel.Hide(currentUpdatedControlId);
           }
   
           currentUpdatedControlId = null;
           currentLoadingPanel = null;
       }
   
       HandleAjaxLoadingPanel();
   
       </script>
   </body>

   In the javascript I added a check to make sure that the postback was made by the grid - in case you remove it, you will always get the LoaddingPanel.

Sincerely yours,
Tsvetie
the Telerik team

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

[sk270]

Just checking if the problem of RadToolTip with RadGrid Ajax has been fixed!   I plan on using RadTooltip and was was excited by your "Fully Compatible" claims.  However, I am running into : "Microsoft JScript runtime error: Sys.InvalidOperationException: A control is already associated with the element." problem.

[Georgi Tunev]

Hello sk270,

RadToolTipManager is indeed compatible with RadGrid if you follow the implementation scenario shown in the Multi insert in RadGrid using RadToolTip and in this help article.
I am afraid however, that we are not familiar with the error that you receive and we are unable to reproduce it. Can you please send us a small sample project where the problem can be reproduced? We will check it and do our best to help.






Best wishes,
Georgi Tunev
the Telerik team

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

[sk270]

Hello,

Your own post on this thread (from Tsvetie) says that RadToolTip does not work with RadGrid AJAX.  I understand that I can put everything in an update panel, but that is not what I am asking.

[Georgi Tunev]

Hi sk270,

I agree, the statement that Tsvetie used can be interpreted in this way. However, I would like to stress out that the RadToolTip "Prometheus" control can be used with RadGrid with Ajax enabled. The only difference is that the implementation for now is not so straightforward as with other controls.

I believe the information below will shed some light over the situation:

When you enable the Ajax of the RadGrid, any postback (raised from within the RadGrid), would result in an AJAX request that would update the RadGrid control, and the RadGrid control only.

For the RadToolTipManager to "tooltipify" the RadGrid control after Ajax update, "something" must inform RadToolTipManager as the manager must go again through the controls with IDs from its TargetControls collection and tooltipify them.

By the way the same logic apply to cases when you have tooltipified an element that is in an UpdatePane, RadAjaxPanel, etc. In this case, to make the implementation easier for our customers, we added some code that would "listen" for ajax requests and check whether it needs to tooltipified any updated by ajax request controls.

Currently, as  the Ajax request made by the RadGrid (with EnableAjax=true) differs slightly from the standard ajax requests, the RadToolTipManager cannot register these requests.

Of course we will do our best to improve the situation and to make the tooltipifying of RadGrid easier, however this will happen in a future version of the controls. This task is not easily achieved and we will need more time for investigation and implementation of the new logic. I hope that you understand our position in this matter.

This being said, for the time being we suggest to use the workaround that was shown in this forum thread. If you experience any problems with it, please send us a sample project in a support ticket (as you know, you cannot attach files in the forums) and we will check it right away.



Best wishes,
Georgi Tunev
the Telerik team

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

[sk270]

Thank you for the explanation.  I understand now.  I was essentially trying to achieve something very similar to the multi-insert example. 

I presume you are working on building the grid control for Promentheus.  I would rather wait for that.

[garfield]

I'm having the same problem, my tooltipmanager stops working after any ajax request from the grid.

Has this issue been solved in the current version?

Thanks

[Tsvetie]

Hello garfield,
First of all, I would like to point out that as Georgi Tunev mentioned, this is not an issue, but rather a feature that is meant to simplify the integration of RadGrid Classic and RadToolTip Prometheus.

Regarding this feature - currently, most development efforts are concentrated on the Prometheus suite and that is why we have decided to set low priority for this task. 

I would recommend that you use RadGrid Prometheus, instead of RadGrid Classic, and an UpdatePanel with UpdateMode=Conditional, or a RadAjaxPanel to wrap the two controls.

In case the problem persists, please prepare and send us a simple running project, demonstrating the described problem, together with detailed information on the steps we need to follow in order to reproduce it. Once we have your project, we will do our best to help you get the desired result.

Greetings,
Tsvetie
the Telerik team

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