JS Error on radAjaxPanel callback

[Nathan J Pledger]

Hi,

I am (obviously) new to Prometheous and was wondering if you could tell me where I am going wrong with my problem.

I have a radAjaxPanel that contains timing data. This timing data is refreshed over AJAX every 10 seconds. Each individual being timed has a number of properties (such as best times, entrant, etc.), which should dispplay on clicking on the name of the rider. This should appear in a ToolTip.

I'll walk you quickly through my code:

I have the following ToolTipManager:

        <telerik:RadToolTipManager ID="radTooltipManager" runat="server"
                Width="430px"
                Height="40px"
                OffsetX="100"
                Animation="None"
                Sticky="true"
                Title="Hello"
                Position="BottomRight"
                ManualClose="true"
                Skin="Default">
        </telerik:RadToolTipManager>

I have an Ajax Panel (standard radControls):

                        <radA:RadAjaxPanel ID="radAjaxPanelSector" runat="server" LoadingPanelID="ajaxLoadingPanel">

Inside which I am rendering a table of results. For a row:

<asp:Repeater ID="rptTop10Riders" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <td headers="thIcon" id="tdIcon" runat="server"></td>
                                                    <td headers="thPosition"><%# DataBinder.Eval(Container.DataItem,"SectorLeaderboardPosition") %></td>
                                                    <td headers="thRaceNo" id="tdRaceNo" runat="server" class="raceNo"></td>
                                                    <td headers="thRiderName" id="tdRiderName" runat="server" class="riderName"></td>
                                                    <td headers="thMachine"><%# DataBinder.Eval(Container.DataItem,"Machine") %></td>
                                                    <td headers="thLap"><%# DataBinder.Eval(Container.DataItem,"LapNumber") %></td>
                                                    <td headers="thSectorTime"><%# DataBinder.Eval(Container.DataItem,"SectorTimeAsString") %></td>
                                                    <td headers="thLapTime"><%# DataBinder.Eval(Container.DataItem,"LapTimeAsString") %></td>
                                                    <td headers="thLapSpeed"><%# DataBinder.Eval(Container.DataItem,"LapSpeed") %></td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>

All very simple.
Not if we take the tdRiderName cell (I've highlighted this in bold). I hook into the binding on the OnItemDataBound event of the Repeater, thus:

void rptTop10Riders_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            switch (e.Item.ItemType)
            {
                case ListItemType.Item:
                case ListItemType.AlternatingItem:

                    SectorResults sectorResults=(SectorResults)e.Item.DataItem;
                    HtmlTableCell tdRiderName=(HtmlTableCell)e.Item.FindControl("tdRiderName");

                        HtmlAnchor riderNameAnchor=new HtmlAnchor();
                        riderNameAnchor.Controls.Add(new LiteralControl(sectorResults.CompetitorName));
                        //riderNameAnchor.HRef="#";
                        riderNameAnchor.ID="riderNameAnchor"+sectorResults.RaceNumber.ToString();
                        riderNameAnchor.Title="Click to expand this riders details";
                        tdRiderName.Controls.Add(riderNameAnchor );

                        this.radTooltipManager.TargetControls.Add(riderNameAnchor.ID);


                    }
                    break;
            }
        }

This displays an empty bubble. More or less okay. Problem is, it does not call my AjaxUpdate event, even though it is defined in Page_Load:

            radTooltipManager.AjaxUpdate+=new Telerik.Web.UI.ToolTipUpdateEventHandler(radTooltipManager_AjaxUpdate);

void radTooltipManager_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)
        {
            int index = e.TargetControlID.LastIndexOf("_");
            string elementID = e.TargetControlID.Substring(index + 1);
            this.UpdateToolTip(elementID, e.UpdatePanel);
        }

Also, when the page is refreshed via the Ajax Panel On Ajax Request event, I get a JS error, saying "Object doesn't support this property or method".

I must be missing something here, can someone please help?

Many thanks

Nathan

[surfer]

From what I've read so far in the forums (and based on my experiments with the Prometheus suite so far), I believe all Prometheus products require ASP.NET AJAX and/or telerik rad Ajax Manager Prometheus edition (not the standard AjaxPanel/AjaxManager from the rad Controls suite).

It appears that the products are built-on top of ASP.NET AJAX and it is best to  be updated with the new Prometheus AjaxManager.

[Nathan J Pledger]

Hi,

I am aware of this.

ASP.NET AJAX has been set up correctly.

Can someone please help me out. I was hoping for an answer overnight, otherwise I'm going to have to junk the idea I had. Hopefully, this will entice a new response.

Thank you very much.

[surfer]

I got a similar setup up in running with the following ASPX declaration (I am using telerik AjaxPanel from the Prometheus Suite)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

         <telerik:RadToolTipManager ID="radTooltipManager" runat="server"
                Width="430px"
                Height="40px"
                OffsetX="100"
                Animation="None"
                Sticky="true"
                Title="Hello"
                Position="BottomRight"
                ManualClose="true"
                Skin="Default" OnAjaxUpdate="radTooltipManager_AjaxUpdate">
        </telerik:RadToolTipManager>

        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <asp:Repeater ID="rptTop10Riders" runat="server" OnItemDataBound="rptTop10Riders_ItemDataBound">
                <ItemTemplate>
                    <tr>
                        <td headers="thIcon" id="tdIcon" runat="server"></td>
                        <td headers="thRaceNo" id="tdRaceNo" runat="server" class="raceNo"></td>
                        <td headers="thRiderName" id="tdRiderName" runat="server" class="riderName"></td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </telerik:RadAjaxPanel>
    </form>
</body>
</html>

and the following  code-behind:

int count = 0;
    protected void rptTop10Riders_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        switch (e.Item.ItemType)
        {
            case ListItemType.Item:
            case ListItemType.AlternatingItem:

                    //SectorResults sectorResults=(SectorResults)e.Item.DataItem;
                    HtmlTableCell tdRiderName=(HtmlTableCell)e.Item.FindControl("tdRiderName");

                    HtmlAnchor riderNameAnchor=new HtmlAnchor();
                    riderNameAnchor.Controls.Add(new LiteralControl("Test"));
                    //riderNameAnchor.HRef="#";
                    riderNameAnchor.ID = "riderNameAnchor" + (count++).ToString();
                    riderNameAnchor.Title = "Click to expand this riders details";
                    tdRiderName.Controls.Add(riderNameAnchor );

                    this.radTooltipManager.TargetControls.Add(riderNameAnchor.ID);

                    break;
         }

    }

    protected void radTooltipManager_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
    {
        int index = e.TargetControlID.LastIndexOf("_");
        string elementID = e.TargetControlID.Substring(index + 1);
        //this.UpdateToolTip(elementID, e.UpdatePanel);
    }

Everything seemed to be running fine (one problem only - closing the tooltip with the "x" changes the font of the repeater - no idea why), but other than that everythin seems to function correctly. Also, I placed a breakpoint in the radToolTipManager_AjaxUpdate method and it fired fire.

I really have no other ideas what is going on at this point... btw, I could not find the UpdateTooltip method you are using? Can you please paste it as well? Is it possible that this method introduces the problems?

[Nathan J Pledger]

Hi,

Thanks for your response. I'm glad I'm not the only one! This Tooltip thing is an absolute godsend for what we need, but it is looking like it isn't reliable enough.

This is the "missing method", it won't cause any issues, because it is fired from the radTooltipManager_AjaxUpdate event handler, which itself does not run.

private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            //Control ctrl = Page.LoadControl("ProductDetails.ascx");
            panel.ContentTemplateContainer.Controls.Add(new LiteralControl(DateTime.Now.ToString("HH:mm:ss")));
//          ProductDetails details = (ProductDetails)ctrl;
//          details.ProductID = elementID;
        }

[surfer]

I am pretty much lost at this point, as in my case radTooltipManager_AjaxUpdate fires and I really have no other clues at to what is going on. By the way, I have this up and running in a sample project, if you can tell me an e-mail address I will be able to send you the complete working project - this may provide additional clues for you...

Cheers,
Matt

[Nathan J Pledger]

Oh excellent.

Thanks very much.

Was looking to see if I could email you my email address, but I couldn't find anything.

So, lets use this one:

[e-mail]

Most appreciated. It will at least make sure everything is in place that should be in place.

Anyone from Telerik can cast their eye on this?

[surfer]

Done - just sent the file. I hope it will be useful for you and will provide additional clues.

[surfer]

Oops, sorry Nathan, was able to check my mail just now - I've resent the project to your gmail account. Wish you luck with the project (motor racing sounds very interesting indeed!)