JS error using Tooltip in Datalist

[Jon Hobbs]

Hi,

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.....

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

	<asp:UpdatePanel ID="PhotoPanel" runat="server">
	<ContentTemplate>
	<asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable">
	<ItemStyle CssClass="GalleryPhoto" />
	<ItemTemplate>
	<div class="PhotoInner">
	<img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" />
	<asp:Linkbutton ID="lb_ViewComments" runat="server"><b><%# DataBinder.Eval(Container.DataItem, "CommentCount")%> comments</b></asp:Linkbutton>
	</span>
	<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>
	</div>
	</div>
	</ItemTemplate>
	</asp:DataList>
	</ContentTemplate>
	</asp:UpdatePanel>

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

[Scott]

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"
             TargetControlId="link1"/>

 

[Kevin]

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"/>
        <div>
           <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"
             TargetControlId="link1"/>
        </div>

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

[Kevin]

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

ASPX

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

Code-behind (C#)

protected void Page_Load(object sender, EventArgs e)
    {
        DL_Photos.DataSource = CreateTestTable();
        DL_Photos.DataBind();
    }


    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.Columns.Add("Name");
        table.Columns.Add("CommentCount");

        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.

[Jon Hobbs]

Kevin,

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

[Jon Hobbs]

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.

[Arie Segev]

"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