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

Tooltip not showed correctly

1 Answer 62 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
jing
Top achievements
Rank 1
jing asked on 07 Dec 2010, 04:08 AM
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);
            }
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 09 Dec 2010, 11:42 AM
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.
Tags
ToolTip
Asked by
jing
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or