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

Tooltip not showed correctly

1 Answer 105 Views

ToolTip

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 09 Dec 2010, 11:42 AM

demo.zip

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.