OnAjaxUpdate not fired with dynamically added tooltip

[Pierre]

Hi, I have a radgrid with one template column with a icon. I need to add a tooltips that will display a picture.

In the ItemDataBound of the grid I update the column icon and set a tooltip and add this tooltip in the page with a panel. This part work good, the tooltip popup with the text "TEST". Now I when to use the OnAjaxUpdate of the radToolTipsManager to display a picture insted of the text. I cant fire this function. I think the link are not made between the tooltip and the tooltipsmanager. For example I set the skin Web20Orange in the Tooltipsmanager but the tooltip fired in the ragrid are with the default skin. Any idea?

VB

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridDataItem Then
            Dim Photo As System.Web.UI.WebControls.Image = CType(e.Item.FindControl("Photo"), System.Web.UI.WebControls.Image)



            If DataBinder.Eval(e.Item.DataItem, "Photo") = True Then
                Photo.ID = DataBinder.Eval(e.Item.DataItem, "ID")
                Photo.ImageUrl = "/Images/Photo.gif"
                Photo.ImageAlign = System.Web.UI.WebControls.ImageAlign.AbsMiddle
                Photo.Style.Add("vertical-align", "middle")
                Photo.BorderWidth = Unit.Pixel(0)

                Dim monTooltips As New RadToolTip
                monTooltips.ID = Guid.NewGuid.ToString
                monTooltips.TargetControlID = DataBinder.Eval(e.Item.DataItem, "ID")
                monTooltips.RelativeTo = ToolTipRelativeDisplay.Element
                monTooltips.Position = ToolTipPosition.MiddleRight
                monTooltips.Text = "Test"
                Panel1.Controls.Add(monTooltips)
            Else
                Photo.ImageUrl = "/Gestion/Images/16X16/Blank.gif"
                Photo.AlternateText = ""
                Photo.ImageAlign = System.Web.UI.WebControls.ImageAlign.AbsMiddle
                Photo.Style.Add("vertical-align", "middle")
                Photo.BorderWidth = Unit.Pixel(0)
            End If
        End If
    End Sub

 
ASPX

    <div style="margin:10px 10px">
        <asp:Panel ID="Panel1" runat="server">
        </asp:Panel>

        <telerik:RadToolTipManager ID="RadToolTipManager1" OnAjaxUpdate="OnAjaxUpdate" runat="server" Skin="Web20Orange" animation="Fade">
        </telerik:RadToolTipManager>
        <radG:RadGrid ID="RadGridMembre" runat="server" EnableAJAX="true" Width="400" ShowHeader="true" ShowFooter="false" AutoGenerateColumns="false"
                Skin="Orange" AllowSorting="false" AllowPaging="true" ShowGroupPanel="false"
                OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource1">
            <ClientSettings AllowColumnsReorder="false" EnablePostBackOnRowClick="false">
                <Selecting AllowRowSelect="false"/>
            </ClientSettings>
            <PagerStyle CssClass="RadGridPager" Mode="NextPrevAndNumeric"></PagerStyle>
            <MasterTableView AutoGenerateColumns="False" PageSize="30">
                <GroupByExpressions>
                    <radG:GridGroupByExpression>
                        <SelectFields>
                            <radG:GridGroupByField FieldAlias="Pupitre" FieldName="Pupitre"></radG:GridGroupByField>
                        </SelectFields>
                        <GroupByFields>
                            <radG:GridGroupByField FieldName="Pupitre" SortOrder="Ascending"></radG:GridGroupByField>
                        </GroupByFields>
                    </radG:GridGroupByExpression>
                </GroupByExpressions>
                <Columns>
                    <radG:GridBoundColumn DataField="ID"  Display="false" ReadOnly="True" DataType="System.String" HeaderText="Nom d'usager"
                        SortExpression="ID" UniqueName="ID">
                        <HeaderStyle />
                    </radG:GridBoundColumn>
                    <radG:GridTemplateColumn HeaderText="" uniquename="Photo" Groupable="False">
                        <ItemTemplate>
                            <asp:Image ID="Photo" BorderWidth="0px"
                                ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ID") %>' runat="server">
                            </asp:Image>
                        </ItemTemplate>
                    </radG:GridTemplateColumn>
                    <radG:GridBoundColumn DataField="NomComplet" DataType="System.string" HeaderText="Nom" UniqueName="NomComplet">
                    </radG:GridBoundColumn>
                    <radG:GridBoundColumn DataField="Depuis" DataType="System.string" HeaderText="Membre depuis" DataFormatString="{0:d}" UniqueName="Depuis">
                    </radG:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </radG:RadGrid>

Another thing: When I add tha OnAjaxUpdate, the page crash when the mouse hover the + - icone of the grid group. If I remve this OnAjaxUpdate from the tooltipsmanager line, the toolip of the + radgrid appear correctly (displaying "Collapse group")

Thanks
Pierre

[Tsvetie]

Hello Pierre,
Thank you for the provided code fragments. Actually, when you create an instance of the RadToolTip control, that instance is not connected to the the RadToolTipManager on the page. In case you want RadToolTips that are connected to the manager, you have to let the manager create them. You can do this by just adding the IDs of the controls you want to tooltipify to the TargetControls collection of the manager. From that point on, you need not do anything - the manager will create the RadToolTips for you (with the properties you have set to the RadToolTIpManager).

When you add a RadToolTipManager to the page and leave its TargetControls collection, it will go through all the elements on the page and tooltipify the ones that have a Title attribute. That is why the manager messes up the functionality of the + - buttons of the grid - it has tried to tooltipify them.

I would recommend that you add the IDs of the e.Item.DataItem to the TargetControls collection of the RadToolTipManager - that should solve both your problems. You can have a look at this online help topic for information how to do this.

Kind regards,
Tsvetie
the Telerik team

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

[Mario]

Hello,
I need to specify the height and width for each RadTooltip, because I tooltipfy thumbnail that will be expanded into RadTooltip. Now I hage created a RadTooltipManager and I dinamically add targetcontrols. It works fine but I have some rendering issue because width and height are set in RadTooltipManager for all controls.

So I have tried to use different radtooltips, but they don't expose OnAjaxUpdate, that I need...

So? how can I fix my issue?
Thanks

[Marin Bratanov]

Hi Mario,

You can use the Client-side API of the tooltips - for example set their content element to the image you wish (you can built the src if the big image name is related to the thumbnail image name via some logic). Another option is to utilize the client-side API of the manager to create a tooltip for the additional element which will fire the OnAjaxUpdate call. An example how to do this by attaching a handler to the targeted element is available here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx. You can also use the RadToolTip's API to set the width and height of this new tooltip dynamically - namely the set_width() and set_height() methods.


Greetings,
Marin
the Telerik team