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.
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
);
}
}
}
}