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

TargetControls dynamic update problem

6 Answers 131 Views

ToolTip

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

Jan Krenek asked on 12 Jan 2010, 12:42 PM

Hi,

we're about buying subscription renewal so we're testing AJAX components. So far, we're fully excited about it, great work.

We were trying to accomplish specific ToolTip implementation, but with no avail.

Our goal
To have paginated Repeater (Int32 list as DataSource) inside ajaxified panel using RadAjaxManager, HyperLink in each item has attached ajaxified tooltip via RadToolTipManager, that simply displays its Int32 value. When page gets changed, TargetControls should be reinitiated (as your demos demonstrate). Thus, I placed the RadToolTipManager into UpdatedControls collection of RadAjaxManager, too. But here it goes. When I put mouse over the item, the ToolTip just blinks and disappeared. When I remove RadToolTipManager from UpdatedControls, values are displayed correctly. But the tooltip does not get updated when page change occurs.

My simplified code is attached below:

TestToolTip.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestToolTip.aspx.cs" Inherits="TestToolTip" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="sman" runat="server" /> 
        
                    <telerik:RadAjaxManager ID="aman" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="pnlList"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="pnlList" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="tooltip1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <div style="padding: 30px; border: 1px solid #000"> 
        
                        <telerik:RadToolTipManager ID="tooltip1" runat="server" RelativeTo="Mouse" 
        
                            Skin="Black" Width="50" Height="50" Position="MiddleRight" OnAjaxUpdate="OnUpdate" /> 
        
                        <asp:Panel ID="pnlList" runat="server"> 
        
                            <asp:Repeater ID="list1" runat="server" OnItemDataBound="OnItemBound"> 
        
                            <ItemTemplate> 
        
                                <asp:LinkButton ID="lnk1" runat="server" Text="Test" />, <%# Container.DataItem %><br /> 
        
                            </ItemTemplate> 
        
                            </asp:Repeater> 
        
                            <asp:LinkButton ID="prev" runat="server" Text="prev" OnClick="OnMovePageMinus" /> |  
        
                            <asp:LinkButton ID="next" runat="server" Text="next" OnClick="OnMovePagePlus" /> 
        
                        </asp:Panel> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

TestToolTip.aspx.cs

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            public partial class TestToolTip : System.Web.UI.Page 
        
            { 
        
                protected const int PageSize = 4; 
        
                protected int PageIndex 
        
                { 
        
                    get { 
        
                        if (ViewState["PageIndex"] == null) 
        
                        { 
        
                            ViewState["PageIndex"] = 0; 
        
                        } 
        
                        return (int)ViewState["PageIndex"]; 
        
                    } 
        
                    set {ViewState["PageIndex"] = value;} 
        
                } 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    if (!IsPostBack) 
        
                    { 
        
                        LoadList(); 
        
                    } 
        
                } 
        
                protected void LoadList() 
        
                { 
        
                    tooltip1.TargetControls.Clear(); 
        
                    List<int> ints = new List<int>(){ 1, 2, 3, 4, 5, 6, 7 }; 
        
                    List<int> source = new List<int>(); 
        
                    for (int i = PageIndex * PageSize; i < (PageIndex * PageSize) + PageSize && i < ints.Count; i++) 
        
                    { 
        
                        source.Add(ints[i]); 
        
                    } 
        
                    list1.DataSource = source; 
        
                    list1.DataBind(); 
        
                } 
        
                protected void OnItemBound(object sender, RepeaterItemEventArgs e) 
        
                { 
        
                    if (e.Item.DataItem == null) return; 
        
                    Control lnk1 = e.Item.FindControl("lnk1"); 
        
                    tooltip1.TargetControls.Add(lnk1.ClientID, e.Item.DataItem.ToString(), true); 
        
                } 
        
                protected void OnUpdate(object sender, ToolTipUpdateEventArgs e) 
        
                { 
        
                    e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl(e.Value)); 
        
                } 
        
                protected void OnMovePageMinus(object sender, EventArgs e) 
        
                { 
        
                    PageIndex--; 
        
                    LoadList(); 
        
                } 
        
                protected void OnMovePagePlus(object sender, EventArgs e) 
        
                { 
        
                    PageIndex++; 
        
                    LoadList(); 
        
                } 
        
            }

Thanks very much for any help.

6 Answers, 1 is accepted

answered on 15 Jan 2010, 09:14 AM

Hello Jan,

Thank you for the good words, we highly apprecuate them and our customer content means a lot to us!

As to your particular question, what I can think is that you get nested update panels as a result - one form the ajax manager and one from the internal ajax of the tooltip manager when OnAjaxUpdate is used.

To test my assumption, please remove all the AJAX settings from your page and check whether the issue persists. If it disappears, the assumption is correct and what you should do is to replace the AJAX settings with standard update panels with UpdateMode="Conditional" - this will prevent the outermost update panel from update when teh tooltip is being shown.

This being said, please modify your code in the following manner and test again:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestToolTip.aspx.cs" Inherits="TestToolTip" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="sman" runat="server" />

<div style="padding: 30px; border: 1px solid #000">

<asp:UpdatePanel ID="upPanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<telerik:RadToolTipManager ID="tooltip1" runat="server" RelativeTo="Mouse"

Skin="Black" Width="50" Height="50" Position="MiddleRight" OnAjaxUpdate="OnUpdate" />

<asp:Panel ID="pnlList" runat="server">

<asp:Repeater ID="list1" runat="server" OnItemDataBound="OnItemBound">

<ItemTemplate>

<asp:LinkButton ID="lnk1" runat="server" Text="Test" />, <%# Container.DataItem %><br />

</ItemTemplate>

</asp:Repeater>

<asp:LinkButton ID="prev" runat="server" Text="prev" OnClick="OnMovePageMinus" /> |

<asp:LinkButton ID="next" runat="server" Text="next" OnClick="OnMovePagePlus" />

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Let me know whether this fixed the issue on your side.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Accepted

answered on 20 Jan 2010, 11:56 AM

Hello Jan,

In fact our RadAjax is based upon the standard MS AJAX and when you use the RadAjaxManager it actually dynamically creates update panels. Since the tooltip manager also creates an update panel, there are two nested update panels as a result and thus the parent update panel should have UpdateMode="Conditional" - more information about this is available in the article below:

http://geekswithblogs.net/ranganh/archive/2007/05/16/112525.aspx

This means that it does not matter what implementation of AJAX you use as far as the UpdateMode is set correctly. However, we had some issues with this integration of RadAjax and RadToolTipManager which occurred only in specific scenarios and they are logged in our database for fixing. That is why I suggested to use the update panel because this solution will work for all cases and the other solution will lead to the very same result but might not work depending on your exact setup which will lead to the need of isolating and exchanging code.

I hope that my explanation and the provided article are helpful and I recommend to stick to the update panel solution.

On a side note, forums are considered community resources and in order to ensure that you will get a fast response from us I strongly recommend to open support tickets which we treat with higher priority and also you are able to attach demos there.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

TargetControls dynamic update problem

6 Answers, 1 is accepted