2 tooltips referenced within 1 grid

[Dave]

I have a RadGrid that is Ajaxified by the Ajax Manager. I have 2 tooltip managers pointing to different controls. One is linked to a hyperlink in the header of the grid. The other is linked to an image in the item template of the same column as the header with tooltip. I am adding the target controls in the itemdatabound of the grid. For some reason, only the header tooltip is working at this point. The ajaxupdate event is not firing for the second tooltip. If i disable ajax, they both work correctly. Is there some trick to multiple tool tip managers with an ajaxed grid.

Here is my code:

<asp:Panel id="pnlContent" runat="server">

<telerik:RadGrid id="grdProspects" runat="server" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true" PageSize="20" ShowHeader="true" ShowFooter="false" Width="760" GroupingEnabled="false"  >
                                    <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" AllowColumnsReorder="true">
                                        <ClientEvents OnRowContextMenu="Prospects_RowContextMenu" OnColumnContextMenu="Prospects_ColumnContextMenu" />
                                        <Selecting AllowRowSelect="true" />
                                        <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" />
                                        <Scrolling AllowScroll="true" ScrollHeight="500" UseStaticHeaders="true"/>
                                    </ClientSettings>

                                    <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="Bottom" />
                                    <MasterTableView TableLayout="Fixed"  AllowMultiColumnSorting="true" NoMasterRecordsText="No Prospects" DataKeyNames="BACID" Width="760">
                                        <CommandItemSettings ShowExportToCsvButton="true" />
                                        <Columns>
                                            <telerik:GridTemplateColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" Reorderable="false">
                                                <HeaderTemplate>
                                                    <asp:HyperLink ID="lnkLegend" runat="server" NavigateUrl="" Text="Legend"></asp:HyperLink>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:Image ID="imgCalled" runat="server" ImageUrl="~/DesktopModules/BAOffice/images/called_on.gif"  AlternateText="Called"></asp:Image>
                                                    <asp:Image ID="imgRegistered" runat="server" ImageUrl="~/DesktopModules/BAOffice/images/register_on.gif" AlternateText="Registered"></asp:Image>
                                                    <asp:Image ID="imgConfirmed" runat="server" ImageUrl="~/DesktopModules/BAOffice/images/confirm_on.gif" AlternateText="Confirmed"></asp:Image>
                                                    <asp:Image ID="imgFinalized" runat="server" ImageUrl="~/DesktopModules/BAOffice/images/final_on.gif" AlternateText="Finalized"></asp:Image>
                                                    <asp:Image ID="imgHasComment" runat="server" ImageUrl="~/DesktopModules/BAOffice/images/feedback.gif" ></asp:Image>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn HeaderText="Name" DataField="Name" SortExpression="SortName"></telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>

                                </telerik:RadGrid>
</asp:panel>

<telerik:RadToolTipManager runat="server" ID="rttmRecruiterComments" Position="Center" Text="Loading..."
            RelativeTo="Element" Width="350px" Height="300px" Animation="Fade" HideEvent="LeaveToolTip" ToolTipControl="controls/RecruiterComments.ascx">
          </telerik:RadToolTipManager>

 <telerik:RadToolTipManager runat="server" ID="rttmLegend" Position="Center" Text="Loading..."
            RelativeTo="Element" Width="250px" Height="200px" Animation="Fade" HideEvent="LeaveToolTip" ToolTipControl="controls/RecruiterLegend.ascx">
          </telerik:RadToolTipManager>

<telerik:RadAjaxManager ID="AjaxManager" runat="server" EnableAJAX="true" DefaultLoadingPanelID="LoadingPanel6">
    <ClientEvents/>
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlContent">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
                <telerik:AjaxUpdatedControl ControlID="AjaxManager" />

            </UpdatedControls>
        </telerik:AjaxSetting>
         <telerik:AjaxSetting AjaxControlID="AjaxManager">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
                <telerik:AjaxUpdatedControl ControlID="AjaxManager" />

            </UpdatedControls>
        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

Private Sub grdProspects_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles grdProspects.ItemDataBound
            Select Case e.Item.ItemType

                Case GridItemType.Header
                    Dim lnkLegend As HyperLink = DirectCast(e.Item.FindControl("lnkLegend"), HyperLink)
                    rttmLegend.TargetControls.Add(lnkLegend.ClientID, True)

                Case GridItemType.Item, GridItemType.AlternatingItem

                    With DirectCast(e.Item.DataItem, Prospect)
                        DirectCast(e.Item.FindControl("imgCalled"), Image).Visible = .IsCalled
                        DirectCast(e.Item.FindControl("imgRegistered"), Image).Visible = .IsRegistered
                        DirectCast(e.Item.FindControl("imgConfirmed"), Image).Visible = .IsConfirmed
                        DirectCast(e.Item.FindControl("imgFinalized"), Image).Visible = .IsFinalized

                        Dim imgHasComment As Image = DirectCast(e.Item.FindControl("imgHasComment"), Image)
                        imgHasComment.Visible = .HasRecruiterComment
                        If imgHasComment.Visible Then
                            rttmRecruiterComments.TargetControls.Add(imgHasComment.ClientID, .BACID, True)
                        End If



            End Select
        End Sub

Thanks!

[Dave]

Does anyone have any hints? I am doing something wrong with the grid and tooltips?

Any help would be greatly appreciated?

Thanks!

[Svetlina Anati]

Hello ApexUnited,

What I see form your code is that you update the grid with the targets but you do not update the tooltip manager and I think that this is the reason for the issue. When you update the grid you should also update the managers as explained in the following demo:

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

Sincerely yours,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Dave]

So I added the tooltipmanager to the updatedcontrols of the ajax manager and it is still not working.

<telerik:RadToolTipManager runat="server" ID="rttmRecruiterComments" Position="Center" Text="Loading..."
            RelativeTo="Element" Width="350px" Height="300px" Animation="Fade" HideEvent="LeaveToolTip" ToolTipControl="controls/RecruiterComments.ascx">
          </telerik:RadToolTipManager>



 <telerik:RadToolTipManager runat="server" ID="rttmLegend" Position="Center" Text="Loading..."
            RelativeTo="Element" Width="250px" Height="200px" Animation="Fade" HideEvent="LeaveToolTip" ToolTipControl="controls/RecruiterLegend.ascx">
          </telerik:RadToolTipManager>

<telerik:RadAjaxManager ID="AjaxManager" runat="server" EnableAJAX="true" DefaultLoadingPanelID="LoadingPanel6">
    <ClientEvents/>
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlContent">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
                <telerik:AjaxUpdatedControl ControlID="AjaxManager" />
                <telerik:AjaxUpdatedControl ControlID="rttmRecruiterComments" />
                <telerik:AjaxUpdatedControl ControlID="rttmLegend" />

            </UpdatedControls>
        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

When i hover over the image within the grid, i see the tooltip start to load, it then disappears and the whole page goes white. I also have a javascript error at this point:

Message: Sys.ArgumentNullException: Value cannot be null.

Parameter name: panelsUpdated[0]

[Tsvetie]

Hello ApexUnited,
I was not able to reproduce the error you mention locally. Could you please open a new support ticket and send me a simple running project, demonstrating this error?

In the meantime, could you please try replacing the RadAjaxManager control with a RadAjaxPanel to see if this will fix the problem? For example:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <asp:Panel ID="pnlContent" runat="server">
        <telerik:RadGrid ID="grdProspects" runat="server" AutoGenerateColumns="false" AllowSorting="true"
            AllowPaging="true" PageSize="20" ShowHeader="true" ShowFooter="false" Width="760"
            GroupingEnabled="false">
            <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" AllowColumnsReorder="true">
                <Selecting AllowRowSelect="true" />
                <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" />
                <Scrolling AllowScroll="true" ScrollHeight="500" UseStaticHeaders="true" />
            </ClientSettings>
            <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="Bottom" />
            <MasterTableView TableLayout="Fixed" AllowMultiColumnSorting="true" NoMasterRecordsText="No Prospects"
                aDataKeyNames="BACID" Width="760">
                <CommandItemSettings ShowExportToCsvButton="true" />
                <Columns>

                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </asp:Panel>
    <telerik:RadToolTipManager runat="server" ID="rttmRecruiterComments" Position="Center"
        Text="Loading..." RelativeTo="Element" Width="350px" Height="300px" Animation="Fade"
        HideEvent="LeaveToolTip" ToolTipControl="controls/RecruiterComments.ascx">
    </telerik:RadToolTipManager>
    <telerik:RadToolTipManager runat="server" ID="rttmLegend" Position="Center" Text="Loading..."
        RelativeTo="Element" Width="250px" Height="200px" Animation="Fade" HideEvent="LeaveToolTip"
        ToolTipControl="controls/RecruiterLegend.ascx">
    </telerik:RadToolTipManager>
</telerik:RadAjaxPanel>

Kind regards,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Alejandro]

Adding an update control to ajaxmanager worked for me, I mean, when Grid updates update ToolTIpManager as well.

[Robert Helm]

 Was there a solution to this problem? I'm having the same problem, specifially:

"When I hover over the image within the grid, i see the tooltip start to load, it then disappears and the whole page goes white. I also have a javascript error at this point:
Message: Sys.ArgumentNullException: Value cannot be null.

Parameter name: panelsUpdated[0] "

When I debug on that error, I get to 

Sys.WebForms.PageLoadedEventArgs = function Sys$WebForms$PageLoadedEventArgs(panelsUpdated, panelsCreated, dataItems)

and inspecting panelsUpdated[] paramter, there are all my UpdatedControls. But the first item, panelsUpdated[0], is null. Does that yield any clues?

I tired using RadAjaxPanel and it didn't work.
I beleive I'm configured correctly as well, just like the demo link (http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx)


Thanks for any info.

[Robert Helm]

I started my own thread for this here: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/radtooltipmanager-onajaxupdate-not-firing-after-radajaxmanager-onajaxrequest.aspx#2114744