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

RadChart in tooltip not updated

1 Answer 103 Views

ToolTip

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

Peichung asked on 01 May 2009, 02:40 AM

I have RadChart inside tooltip as follows:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ToolTipChart.aspx.cs" Inherits="WebApp_Test_ToolTipChart" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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">  
        
                <div> 
        
                     <asp:ScriptManager ID="uxScriptManager" runat="server" /> 
        
                    <a href="#" id="link1">link1</a> 
        
                    <a href="#" id="link2">link2</a> 
        
                    <telerik:RadToolTipManager runat="server" ID="uxToolTipManager" 
        
                        Width="250px" 
        
                        Height="100px"   
        
                        Animation="Fade" 
        
                        Position="BottomRight" 
        
                        RelativeTo="Mouse" 
        
                        Sticky="true"   
        
                        ManualClose="true" 
        
                        OnAjaxUpdate="OnAjaxUpdate">  
        
                        <TargetControls> 
        
                        <telerik:ToolTipTargetControl IsClientID="true" TargetControlID="link1" /> 
        
                        <telerik:ToolTipTargetControl IsClientID="true" TargetControlID="link2" /> 
        
                        </TargetControls> 
        
                    </telerik:RadToolTipManager> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            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 WebApp_Test_ToolTipChart : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void OnAjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs args)  
        
                {  
        
                    args.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("<div>" + args.TargetControlID + "</div>"));  
        
                    RadChart chart = new RadChart();  
        
                    chart.Series.Add(new Telerik.Charting.ChartSeries());  
        
                    chart.Series[0].Name = args.TargetControlID;  
        
                    args.UpdatePanel.ContentTemplateContainer.Controls.Add(chart);  
        
                }  
        
            }

The LiteralControl in the tooltip, as expected, displays TargetID depending on which item I hover. The chart, however, always display the first item hovered. If Item2 was hovered first, the legend in the chart will always be link2; similarly, if I hover item1 first, the legend in the chart will always be link1 afterwards. The chart just doesn't seem to be updated on each OnAjaxUpdate() call. Please help. Thanks,

Peichung

1 Answer, 1 is accepted

answered on 04 May 2009, 08:22 AM

Hi Peichung,

I already answered your support thread and modified and attached your demo there. For your convenience and for others who might encounter the same problem, I pasted my reply below:

When we add to the tooltip controls with ViewState we have to make sure that these controls are created before the LoadViewState event fires so that their ViewState information is loaded. In order to avoid forcing our clients to recreate all their controls in the Init event on postback, we decided to fire the AjaxUpdate event earlier in the page lifecycle. That is why the RadChart takes its old data from the ViewState and does not get updated.

In order to get the desired result, you should set the new value in the RadChart's PrePender event, e.g as shown below:

    
            protected string targetID = null;  
        
                protected RadChart chart1= null;  
        
                protected void OnAjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs args)  
        
                {  
        
                    args.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("<div>" + args.TargetControlID + "</div>"));  
        
                    RadChart chart = new RadChart();  
        
                    chart.Series.Add(new Telerik.Charting.ChartSeries());  
        
                    targetID = args.TargetControlID;  
        
                    chart1 = chart;  
        
                    chart.PreRender += new EventHandler(chart_PreRender);  
        
                    args.UpdatePanel.ContentTemplateContainer.Controls.Add(chart);  
        
                }  
        
                void chart_PreRender(object sender, EventArgs e)  
        
                {  
        
                    chart1.Series[0].Name = targetID;  
        
                }

In case you have a lot of controls and not only a RadChart, I recommend to wrap them in a user control and set the desired values in the user control's PreRender event in order to avoid attaching preprender handlers to every control with a viewstate.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.