JS error using Tooltip in Datalist

7 posts, 0 answers
  1. Jon Hobbs
    Jon Hobbs avatar
    48 posts
    Member since:
    May 2007

    Posted 14 May 2007 Link to this post


    First of all, sorry for posting so many threads with questions. I have been a subscriber for a couple of years but only recently started using Rad controls in a lot of projects and Ajax and Prometheus are still confusing me.

    I have a datalist in my application (which is inside an updatepanel), which shows comments about photos. I have used your examples to try to add a tooltip into each item, attached to a linkbutton control. My code is as follows.....

    1Sub Photos_Bound(ByVal obj As Object, ByVal e As DataListItemEventArgs) 
    3            If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then 
    5                Dim link As LinkButton = DirectCast(e.Item.FindControl("lb_ViewComments"), LinkButton) 
    6                Dim tooltip As RadToolTip = DirectCast(e.Item.FindControl("CommentToolTip"), RadToolTip) 
    7                tooltip.TargetControlID = link.ClientID 
    8                tooltip.IsClientID = True 
    10            End If 
    11        End Sub 

    1<asp:UpdatePanel ID="PhotoPanel" runat="server"
    2    <ContentTemplate> 
    3        <asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable"
    4            <ItemStyle CssClass="GalleryPhoto" /> 
    5            <ItemTemplate> 
    6                <div class="PhotoInner"
    7                    <img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" /> 
    9                        <asp:Linkbutton ID="lb_ViewComments" runat="server"><b><%# DataBinder.Eval(Container.DataItem, "CommentCount")%> comments</b></asp:Linkbutton> 
    10                        </span> 
    11                        <telerik:radtooltip runat="server" id="CommentToolTip" Sticky="true" ManualClose="true" Title="Just Testing" ShowEvent="OnClick" Skin="Web20" RelativeTo="Element" Width="350px" Height="250px" Position="MiddleRight" OffsetX="6" ></telerik:radtooltip> 
    12                    </div> 
    13                </div> 
    14            </ItemTemplate> 
    15        </asp:DataList> 
    16    </ContentTemplate> 

    I have removed about 80% of the html which I don't think is relevant to the problem.

    Unfortunately when the page loads I get the following error in an alert box ....

    Line: 3057
    Char: 12
    Error: Sys.ArgumentNullException: Value cannot be null.
              Parameter name: Element
    Code: 0

    Am I just doing something silly ? Or have I discovered a bug ?

    I'm guessing I'm just doing something very stoopid :)

  2. Scott
    Scott avatar
    47 posts
    Member since:
    Mar 2006

    Posted 15 May 2007 Link to this post

    I have the same problem.  I have simplified mine to:

    <asp:ScriptManager id="ScriptManager" runat="server"/>   
    <img id="link1" src="images/test.gif" title="this is my tooltip">  
    <telerik:RadToolTip runat="server" ID="RadToolTip1" height="100px" width="150px" 
                 IsClientID="true" Position="MiddleRight" 


  3. DevCraft R3 2016 release webinar banner
  4. Kevin
    Kevin avatar
    549 posts
    Member since:
    Nov 2006

    Posted 15 May 2007 Link to this post

    The problem indeed appears if the runat="server" attribute for the <img> tag is not set. Setting runat="server" resolved the problem in the second problem

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> 
               <img runat="server" id="link1" src="images/test.gif" title="this is my tooltip">   
                <telerik:RadToolTip runat="server" ID="RadToolTip1" height="100px" width="150px"  
                 IsClientID="true" Position="MiddleRight"  

    However, I am still not sure what happens with problem #1... will check this out in a second...

  5. Kevin
    Kevin avatar
    549 posts
    Member since:
    Nov 2006

    Posted 15 May 2007 Link to this post

    Jon, I've just tried a very similar setup based on yours:

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 
            <asp:UpdatePanel ID="PhotoPanel" runat="server"
                    <asp:DataList CellSpacing="8" ID="DL_Photos" OnItemDataBound="Photos_Bound" runat="server" 
                        RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable"
                        <ItemStyle CssClass="GalleryPhoto" /> 
                            <div class="PhotoInner">                             
                                <asp:LinkButton ID="lb_ViewComments" runat="server"><b><%# DataBinder.Eval(Container.DataItem, "CommentCount")%> comments</b></asp:LinkButton> 
                                    Title="Just Testing"  

    Code-behind (C#)
    protected void Page_Load(object sender, EventArgs e) 
            DL_Photos.DataSource = CreateTestTable(); 
        protected void Photos_Bound(object obj, DataListItemEventArgs e) 
            if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem) 
                LinkButton link = (LinkButton)e.Item.FindControl("lb_ViewComments"); 
                RadToolTip tooltip = (RadToolTip)e.Item.FindControl("CommentToolTip"); 
                tooltip.TargetControlID = link.ClientID; 
                tooltip.IsClientID = true
        private DataTable CreateTestTable() 
            DataTable table = new DataTable(); 
            table.Rows.Add(new object[] { "Item1""Value1" }); 
            table.Rows.Add(new object[] { "Item2""Value2" }); 
            table.Rows.Add(new object[] { "Item3""Value3" }); 
            return table; 

    and the ToolTip appeared as expected on-click (per the property settings) on the links... everything was working fine. What might be different in your case? I am using MS AJAX Extensions 1.0 Official Release and the Official Prometheus Beta.

  6. Jon Hobbs
    Jon Hobbs avatar
    48 posts
    Member since:
    May 2007

    Posted 15 May 2007 Link to this post


    Thank you for your help. I am getting somewhere with this :) But I now have 2 new problems.

    I tried your code in an empty page and it seemed to work, so i tried copying all of my page back in, one section at a time to see where the offending code was. I eventually found it Photos_Bound. Basically my Linkbutton was wrapped inside a span  which i was disabling  if a photo had no comments attached to it using SpanName.Visible = False.

    Obviously this was removing the  link tag on the client side, hence the javascript error. This causes me....

    Problem 1) How to get rid of the span if no comments have been left, without messing up the tooltips. ? Anyone else have this problem ?

    Now that the page is working I also have a more worrying problem.

    Problem 2)  When I test the page in Firefox the Tooltips only stay on screen for about  a second, even though i have ManualClose="true" and Sticky="true". The problem seems to be that  clicking the tooltip seens to be firing a  callback (i know this because I  changed some settings on the page from a different browser and the page updated when I opened a tooltip so it must have  rebound the datalist).

    Anyone know how I stop a callback happening when I open a tooltip, or why this only happens in firefox ?

    Thanks again, Jon
  7. Jon Hobbs
    Jon Hobbs avatar
    48 posts
    Member since:
    May 2007

    Posted 15 May 2007 Link to this post

    Sorry, Ignore problem 2, that was just me being thick.

    The reason it was doing a callback is because I was clicking a linkbutton to open the tooltip. The linkbutton had no NavigateURL so in IE it did nothing, but in forefox it still did a callback, so I changed it to a SPAN, which worked.
  8. Arie Segev
    Arie Segev avatar
    39 posts
    Member since:
    Dec 2006

    Posted 24 May 2007 Link to this post

    "Problem 1) How to get rid of the span if no comments have been left, without messing up the tooltips. ? Anyone else have this problem ?"

    It's not clear what's your problem, but  I have dealt with these situations (not with the tooltip control specifically) by using a div for the comments and use a client side JS to check if the  comments variable = ""  (or null dependning how you represent no comments) and if so set the display of the div to none. You get the value of the comments variable as usuall by using the client-id of the datalist control.  I would guess that in your case wrapping the  comments area and the tool tip control with a div and working with the display of that div  should achieve the desired effect, but again, I did not use the tooltip in my case. I was considering it but I lean towards using RadWin.

    -- Arie
Back to Top
DevCraft R3 2016 release webinar banner