OnAjaxUpdate not fired with dynamically added tooltip

4 posts, 0 answers
  1. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 28 Nov 2007 Link to this post

    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?

        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.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" 
                    Photo.ImageUrl = "/Gestion/Images/16X16/Blank.gif" 
                    Photo.AlternateText = "" 
                    Photo.ImageAlign = System.Web.UI.WebControls.ImageAlign.AbsMiddle  
                    Photo.BorderWidth = Unit.Pixel(0)  
                End If 
            End If 
        End Sub 
        <div style="margin:10px 10px">  
            <asp:Panel ID="Panel1" runat="server">  
            <telerik:RadToolTipManager ID="RadToolTipManager1" OnAjaxUpdate="OnAjaxUpdate" runat="server" Skin="Web20Orange" animation="Fade">  
            <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"/>  
                <PagerStyle CssClass="RadGridPager" Mode="NextPrevAndNumeric"></PagerStyle> 
                <MasterTableView AutoGenerateColumns="False" PageSize="30">  
                                <radG:GridGroupByField FieldAlias="Pupitre" FieldName="Pupitre"></radG:GridGroupByField> 
                                <radG:GridGroupByField FieldName="Pupitre" SortOrder="Ascending"></radG:GridGroupByField> 
                        <radG:GridBoundColumn DataField="ID"  Display="false" ReadOnly="True" DataType="System.String" HeaderText="Nom d'usager" 
                            SortExpression="ID" UniqueName="ID">  
                            <HeaderStyle /> 
                        <radG:GridTemplateColumn HeaderText="" uniquename="Photo" Groupable="False">  
                                <asp:Image ID="Photo" BorderWidth="0px" 
                                    ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ID") %>' runat="server">  
                        <radG:GridBoundColumn DataField="NomComplet" DataType="System.string" HeaderText="Nom" UniqueName="NomComplet">  
                        <radG:GridBoundColumn DataField="Depuis" DataType="System.string" HeaderText="Membre depuis" DataFormatString="{0:d}" UniqueName="Depuis">  

    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")

  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 30 Nov 2007 Link to this post

    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,
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Mario
    Mario avatar
    26 posts
    Member since:
    Oct 2011

    Posted 08 Nov 2011 Link to this post

    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?
  4. Marin Bratanov
    Marin Bratanov avatar
    4928 posts

    Posted 09 Nov 2011 Link to this post

    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.

    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
Back to Top