Update code-behind controls in tooltip from RadToolTipManager

[Markus]

Hello,

I have a problem with the RadToolTipManager and ASP.NET Server Controls. The control which is loaded in the tooltip doesn’t update its label after the button click. I tested the same setup with an aspx page and a ascx user control, in this case everything works as expected.

Do you have any idea where I did something wrong? I used this example as a reference http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx. In the end, I would like to update the control on which the tooltip originated, but because the events in the tooltip itself don’t work, I haven’t tried that yet.

Thanks

Setup:

The Default.aspx file is nested within a master-page with a RadScriptManager, I used the Telerik.Web.UI.dll version 2011.1.519.35

Codes:
Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="AjaxTooltipRad._Default" %>

<%@ Register TagPrefix="tt" Assembly="AjaxTooltipRad" Namespace="AjaxTooltipRad.src" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Tooltip Test
    </h2>

    <p><tt:GalleryControl runat="server" /></p>
</asp:Content>

GalleryControl.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace AjaxTooltipRad.src {
    public class GalleryControl : Control, INamingContainer {
        public const string RTTMID = "rttmid";
        public const string IMGID = "imgid";

        private RadToolTipManager rttm;
        private Image img;

        public GalleryControl() : base() {
            rttm = new RadToolTipManager();
            rttm.ID = RTTMID;
            rttm.Position = ToolTipPosition.BottomCenter;
            rttm.RelativeTo = ToolTipRelativeDisplay.Element;
            rttm.Width = new Unit("300px");
            rttm.Height = new Unit("200px");
            rttm.HideEvent = ToolTipHideEvent.LeaveTargetAndToolTip;
            rttm.AjaxUpdate += new ToolTipUpdateEventHandler(rttm_AjaxUpdate);
            rttm.Skin = "Default";
            rttm.RenderInPageRoot = true;

            img = new Image();
            img.ID = IMGID;
            img.ImageUrl = "http://demos.telerik.com/aspnet-ajax/Img/Northwind/Products/Thumbs/25.jpg";

            rttm.TargetControls.Add(img.ClientID,false);
        }

        private void rttm_AjaxUpdate(object sender, ToolTipUpdateEventArgs e) {
            UpdateToolTip(e.UpdatePanel);
        }

        private void UpdateToolTip( UpdatePanel panel) {
            ServerControlToolTip sctt = new ServerControlToolTip();
            panel.ContentTemplateContainer.Controls.Add(sctt);
        }

        protected override void OnLoad(EventArgs e) {
            base.OnLoad(e);

            this.Controls.Add(rttm);
            this.Controls.Add(img);
        }
    }
}

ServerControlToolTip.cs

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace AjaxTooltipRad.src {

    public class ServerControlToolTip : Control, INamingContainer {

        private const string textboxId = "textboxid";

        private const string buttonId = "buttonid";

        private const string labelId = "labelid";

 

        private TextBox textBox;

        private Button button;

        private Label label;

 

        public ServerControlToolTip() {

            textBox = new TextBox();

            textBox.ID = textboxId;

            button = new Button();

            button.Text = "click";

            button.ID = buttonId;

            button.Click += new EventHandler(button_Click);

            label = new Label();

            label.ID = labelId;

        }       

 

        private void button_Click(object sender, EventArgs e) {

            label.Text = textBox.Text;

        }

 

        protected override void OnLoad(EventArgs e) {

            base.OnLoad(e);

 

            this.Controls.Add(textBox);

            this.Controls.Add(button);

            this.Controls.Add(label);

        }

    }

}

[Marin Bratanov]

Hello Markus,

I believe that the issue here is that you create and add the dynamic controls too late in the page lifecycle and thus their ViewState is not preserved. I would recommend examining the following article for more information on the matter: http://couldbedone.blogspot.com/2007/06/dynamically-created-controls-in-aspnet.html.

That being said - I moved the creation of the elements in the OnInit event handler and things seem to be working correctly as you can see from the video I recorded during my experiment: http://screencast.com/t/EJXUfFcgIs9o. You can also find attached the page I tested with as a reference.

I hope my reply was helpful and you will be able to successfully rework your code.


Greetings,
Marin
the Telerik team

[Markus]

Hi Marin,

Thanks a lot for your answer. Everything works now. I will also give the linked article a look.

Have a nice day,
Markus