Tooltip not showed correctly

2 posts, 0 answers
  1. jing
    jing avatar
    31 posts
    Member since:
    Aug 2007

    Posted 06 Dec 2010 Link to this post

    I have a list of data that displayed in RadGrid. When mouseover the label, the tooltip shown. For the first load, the data in the tooltip is loaded correctly. When navigate to another set (by clicking the "Next" button in the demo below), then mouseover to the same position, the tooltip is loaded but the data is not correct.

    What do i need to change so that the tooltip can be loaded correctly.

    Below is the sample code that can produce this issue.

    Thanks in advance.

    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Tooltip.aspx.cs" Inherits="RadControlsWebApplication1.Tooltip" %>
    <%@ Import Namespace="System.Data" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Tooltip</title>
    </head>
    <body>
        <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" />
            <div>
                <telerik:RadScriptBlock runat="server" ID="ScriptBlock">
      
                    <script type="text/javascript">
                    function toolTipManagerClientBeforeShow(sender, args)
                    {
                        // clear the tooltip value
                        var tooltipLabel = document.getElementById("<%= Label1.ClientID %>");
                        tooltipLabel.innerHTML = "";
                          
                        var panel = $find("<%= XmlHttpPanel1.ClientID %>");
                        sender.set_contentElement(panel.get_element());
                        panel.set_value(sender.get_value());
                    }
                    </script>
      
                </telerik:RadScriptBlock>
                <telerik:RadAjaxManager ID="AjaxManager" runat="server">
                    <ajaxsettings>
            <telerik:AjaxSetting AjaxControlID="Grid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid1" />
                    <telerik:AjaxUpdatedControl ControlID="ToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid1" />
                    <telerik:AjaxUpdatedControl ControlID="ToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </ajaxsettings>
                </telerik:RadAjaxManager>
                <div style="display: none;">
                    <telerik:RadToolTipManager ID="ToolTipManager1" runat="server" Width="250px" Skin="Telerik"
                        Position="BottomCenter" HideEvent="LeaveToolTip" OnClientBeforeShow="toolTipManagerClientBeforeShow" />
                    <telerik:RadXmlHttpPanel ID="XmlHttpPanel1" runat="server" OnServiceRequest="XmlHttpPanel1_ServiceRequest">
                        <asp:Label ID="Label1" runat="server" CssClass="tooltip"></asp:Label>
                    </telerik:RadXmlHttpPanel>
                </div>
                <telerik:RadGrid ID="Grid1" runat="server" AutoGenerateColumns="False" Skin="Vista"
                    GridLines="None" BorderWidth="0px" OnItemDataBound="Grid1_ItemDataBound" Width="300">
                    <mastertableview>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="Title" HeaderText="Title"/>
                                    <telerik:GridTemplateColumn HeaderText="Child" UniqueName="Child">
                                        <ItemTemplate>
                                            <nobr>
                                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("Children") %>'>
                                                    <ItemTemplate><asp:Label ID="LabelName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[\"Name\"]")%>' />
                                                    </ItemTemplate>
                                                    <SeparatorTemplate>,</SeparatorTemplate>
                                                </asp:Repeater>
                                            <nobr>
                                        </ItemTemplate>
                                        <HeaderStyle Width="150px" />
                                        <ItemStyle VerticalAlign="Top" Width="150px" />
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </mastertableview>
                </telerik:RadGrid>
                <asp:Button ID="Button1" runat="server" Text="Next Set" OnClick="Button1_Click" /> 
            </div>
        </form>
    </body>
    </html>


    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
      
    namespace RadControlsWebApplication1
    {
        public partial class Tooltip : System.Web.UI.Page
        {
            private void BindData(int startIndex)
            {
                DataSet ds = new DataSet();
                DataTable tb = new DataTable();
                tb.TableName = "Parent";
                tb.Columns.Add("ID");
                tb.Columns.Add("Title");
                ds.Tables.Add(tb);
      
                DataTable tbChild = new DataTable();
                tbChild.TableName = "Child";
                tbChild.Columns.Add("ID");
                tbChild.Columns.Add("Name");
                ds.Tables.Add(tbChild);
      
                ds.Relations.Add("Children", ds.Tables["Parent"].Columns["ID"], ds.Tables["Child"].Columns["ID"]);
      
                for (int i = startIndex; i < startIndex + 10; i++)
                {
                    DataRow row = tb.NewRow();
                    row["ID"] = i;
                    row["Title"] = "Title " + startIndex;
                    tb.Rows.Add(row);
      
                    for (int x = 0; x < 3; x++)
                    {
                        DataRow rowChild = tbChild.NewRow();
                        rowChild["ID"] = i;
                        rowChild["Name"] = "Name " + i + " " + x;
                        tbChild.Rows.Add(rowChild);
                    }
                }
      
                Grid1.DataSource = ds;
                Grid1.DataBind();
            }
      
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindData(0);
                    ViewState["Index"] = 10;
                }
            }
      
            protected void Button1_Click(object sender, EventArgs e)
            {
                BindData(int.Parse(ViewState["Index"].ToString()));
                ViewState["Index"] = int.Parse(ViewState["Index"].ToString()) + 10;
            }
      
            protected void XmlHttpPanel1_ServiceRequest(object sender, Telerik.Web.UI.RadXmlHttpPanelEventArgs e)
            {
                if (e.Value != null && e.Value != "")
                    Label1.Text = e.Value;
            }
      
            protected void Grid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
            {
                if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
                {
                    Repeater rpt1 = (Repeater)e.Item.FindControl("Repeater1");
                    RepeaterItemDataBound(rpt1);
                }
            }
      
            private void RepeaterItemDataBound(Repeater repeater)
            {
                foreach (RepeaterItem rptItem in repeater.Items)
                {
                    Label lblName = (Label)rptItem.FindControl("LabelName");
                    ToolTipManager1.TargetControls.Add(lblName.ClientID, lblName.Text, true);
                }
            }
        }
    }
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Dec 2010 Link to this post

    Hello jing,

     Thank you for the provided code, I built a test demo based on it and I was able to reproduce the problem. It comes from the fact that you never clear the TargetControls collection and thus it holds the old key - value pairs and the first match of target control corresponds to the "old" value.


    To solve the problem you should call the Clear method as shown below:

    private void RepeaterItemDataBound(Repeater repeater)
    {
        ToolTipManager1.TargetControls.Clear();
        foreach (RepeaterItem rptItem in repeater.Items)
        {
            Label lblName = (Label)rptItem.FindControl("LabelName");
            ToolTipManager1.TargetControls.Add(lblName.ClientID, lblName.Text, true);
        }
    }


    For your convenience I attached my test demo, let me know how it goes.

    All the best,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top