TargetControls dynamic update problem

7 posts, 1 answers
  1. Jan Krenek
    Jan Krenek avatar
    16 posts
    Member since:
    Aug 2005

    Posted 12 Jan 2010 Link to this post

    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.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jan Krenek
    Jan Krenek avatar
    16 posts
    Member since:
    Aug 2005

    Posted 15 Jan 2010 Link to this post

    Thats fine you're interested in customer's opinions - we bought new subscription yesterday :-)

    To our problem. Provided code solved the problem. I have to ask you now - that is recommended way to solve situations like that by using asp UpdatePanel? I'm not much familiar to it, since I've been always using just Telerik Ajax only to make asynchronous calls, so I'm not much educated about using those UpdatePanels.

    Thank you for your helpful cooperation.
  5. Jan Krenek
    Jan Krenek avatar
    16 posts
    Member since:
    Aug 2005

    Posted 19 Jan 2010 Link to this post

    Svetlina, shall I start new support ticke to solve this issue faster? :-)
  6. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Jan 2010 Link to this post

    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.
  7. Jan Krenek
    Jan Krenek avatar
    16 posts
    Member since:
    Aug 2005

    Posted 23 Jan 2010 Link to this post

    That's fine you'll keep in mind to fix such situations. I guess its obvious case when one wants to combine tooltip and ajax, so I assume, that more users will appreciate fix in future.

    I didn't mean to rush, Svetlina :-) Sorry for that, I didn't need an answer quickly, so this forum could do the work.

    Thanks for all your help.
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 26 Jan 2010 Link to this post

    Hello Jan,

    I am glad I could shed some light on the problem. In case you need further assistance or you have additional questions do not hesitate to contact us again!


    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017