This is a migrated thread and some comments may be shown as answers.

OnAjaxUpdate not fired with dynamically added tooltip

3 Answers 171 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 2
Iron
Iron
Pierre asked on 28 Nov 2007, 07:39 PM
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 ObjectByVal 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

3 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 30 Nov 2007, 09:39 AM
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
0
Mario
Top achievements
Rank 1
answered on 08 Nov 2011, 02:38 PM
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
0
Marin Bratanov
Telerik team
answered on 09 Nov 2011, 09:16 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
ToolTip
Asked by
Pierre
Top achievements
Rank 2
Iron
Iron
Answers by
Tsvetie
Telerik team
Mario
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or