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

Dynamic Tooltip Problem

1 Answer 129 Views

ToolTip

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

Teo asked on 16 Dec 2011, 10:41 PM

Hi all!

I have a problem implementing the RadToolTipManager in my solution. Because the panel that contains it should update itself and my tooltip ascx be generated dynamically. He jumps.

I show an example of my scenario:

TEST.ASPX:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="tooltip_demo_test" %>

<%@ Register Src="~/tooltip_demo/DynamicToolTip.ascx" TagName="ProductDetails" TagPrefix="uc1" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head id="Head1" runat="server">

<title>

Test Tool Tip

</title>

</head>

<body>

<form id="Form1" method="post" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnltotal">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnltotal" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btntest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnltotal" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Windows7" BackColor="Azure" runat="server">

</telerik:RadAjaxLoadingPanel>

<asp:Panel runat="server" ID="pnltotal">

<telerik:RadToolTipManager ID="RadToolTipManager1" Width="100" Height="200" OffsetY="-1" HideEvent="ManualClose"

runat="server" Skin="Windows7" EnableShadow="true" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"

Position="MiddleRight">

</telerik:RadToolTipManager>

<br />

<asp:Label runat="server" ID="lblfechasel" Font-Size="10px" ForeColor="#CC0000" Font-Names="Verdana"></asp:Label>

<br />

<asp:DataList ID="dlsitems" runat="server" CellPadding="0" CellSpacing="3" RepeatDirection="Vertical" RepeatColumns="1">

<ItemTemplate>

<asp:Table runat="server" CellPadding="5" CellSpacing="0" BorderColor="#E1E1E1" BorderStyle="Solid" BorderWidth="1">

<asp:TableRow runat="server" VerticalAlign="Middle">

<asp:TableCell runat="server" HorizontalAlign="Left">

<asp:Label runat="server" ID="lblvalorsel" Text='<%# Eval("IDsel") %>' Visible="false"></asp:Label>

<asp:Label ID="targetControl1" runat="server" Text='<%# Eval("textosel") %>' Font-Size="11px" Font-Names="Verdana" ForeColor="Purple" style="cursor:pointer;"></asp:Label>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</ItemTemplate>

</asp:DataList>

<br />

</asp:Panel>

<asp:Button runat="server" ID="btntest" Text="Actualizar" OnClick="updateDate" />

</form>

</body>

</html>

TEST.ASPX.VB:

Imports Telerik.Web.UI

Imports System.Data

Partial Class tooltip_demo_test

Inherits System.Web.UI.Page

Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs)

Me.UpdateToolTip(args.Value, args.UpdatePanel)

End Sub

Private Sub UpdateToolTip(ByVal elementID As String, ByVal panel As UpdatePanel)

Dim ctrl As Control = Page.LoadControl("DynamicToolTip.ascx")

Dim details As DynamicToolTip = DirectCast(ctrl, DynamicToolTip)

details.IDsel = elementID

panel.ContentTemplateContainer.Controls.Add(ctrl)

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim datatablefinal As New DataTable("items")

Dim colIDsel As New DataColumn("IDsel")

Dim coltextosel As New DataColumn("textosel")

datatablefinal.Columns.Add(colIDsel)

datatablefinal.Columns.Add(coltextosel)

For var1 As Integer = 1 To 3

Dim fila As DataRow

fila = datatablefinal.NewRow

fila.Item("IDsel") = var1

fila.Item("textosel") = "Over Here No. " & var1.ToString

datatablefinal.Rows.Add(fila)

Next

dlsitems.DataSource = datatablefinal.DefaultView

dlsitems.DataBind()

End Sub

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

For Each item As DataListItem In dlsitems.Items

Dim targetControl1 As Label = DirectCast(item.FindControl("targetControl1"), Label)

Dim lblvalorsel As Label = DirectCast(item.FindControl("lblvalorsel"), Label)

Me.RadToolTipManager1.TargetControls.Add(targetControl1.ClientID, lblvalorsel.Text, True)

Next

End Sub

Protected Sub updateDate(ByVal sender As Object, ByVal e As EventArgs)

lblfechasel.Text = DateTime.Now.ToString("dd 'de' MMMM 'de' yyyy - hh:mm:ss tt")

End Sub

End Class

And my Dynamic ToolTip

DynamicToolTip.ASCX:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="DynamicToolTip.ascx.vb" Inherits="DynamicToolTip" %>

<asp:Table runat="server" CellPadding="30" CellSpacing="0">

<asp:TableRow runat="server" VerticalAlign="Middle">

<asp:TableCell runat="server" HorizontalAlign="Center">

<asp:Label runat="server" ID="lbltextchange" Font-Bold="true"></asp:Label>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

DynamicToolTip.ASCX.VB:

Partial Class DynamicToolTip

    Inherits System.Web.UI.UserControl

    Dim IDselfinal As Integer

    Property IDsel() As Integer

        Get

            IDsel = IDselfinal

        End Get

        Set(ByVal value As Integer)

            IDselfinal = value

        End Set

    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Select Case IDsel

            Case 1

                lbltextchange.Text = "Hola Mundo 1"

                lbltextchange.ForeColor = Drawing.Color.FromName("#0066CC")

            Case 2

                lbltextchange.Text = "Hola Mundo 2"

                lbltextchange.ForeColor = Drawing.Color.FromName("#CC0000")

            Case 3

                lbltextchange.Text = "Hola Mundo 3"

                lbltextchange.ForeColor = Drawing.Color.FromName("#006600")

        End Select

    End Sub

End Class

Thank's for All!!

Daniel Castro
Programador de soluciones Avanzadas sobre Web
IngeWeb Soluciones - Colombia

1 Answer, 1 is accepted

Accepted

answered on 19 Dec 2011, 05:03 PM

Hello Daniel,

This is not a positioning issue but an AJAX issue. It comes from the fact that the AJAX request the TooltipTManager performs triggers an update to the update panels the RadAjaxManager renders. If you examine the list of the requests you will see an infinite loop.

What I can suggest is that you use a regular update panel with UpdateMode set to Conditional instead of this AJAX setting:

<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btntest" />

</Triggers>

<ContentTemplate>

<asp:Panel runat="server" ID="pnltotal">

<telerik:RadToolTipManager ID="RadToolTipManager1" Width="100" Height="200" OffsetY="-1"

HideEvent="ManualClose" runat="server" Skin="Windows7" EnableShadow="true" OnAjaxUpdate="OnAjaxUpdate"

RelativeTo="Element" Position="MiddleRight">

</telerik:RadToolTipManager>

<br />

<asp:Label runat="server" ID="lblfechasel" Font-Size="10px" ForeColor="#CC0000" Font-Names="Verdana"></asp:Label>

<br />

<asp:DataList ID="dlsitems" runat="server" CellPadding="0" CellSpacing="3" RepeatDirection="Vertical"

RepeatColumns="1">

<ItemTemplate>

<asp:Table ID="Table1" runat="server" CellPadding="5" CellSpacing="0" BorderColor="#E1E1E1"

BorderStyle="Solid" BorderWidth="1">

<asp:TableRow ID="TableRow1" runat="server" VerticalAlign="Middle">

<asp:TableCell ID="TableCell1" runat="server" HorizontalAlign="Left">

<asp:Label runat="server" ID="lblvalorsel" Text='<%# Eval("IDsel") %>' Visible="false"></asp:Label>

<asp:Label ID="targetControl1" runat="server" Text='<%# Eval("textosel") %>' Font-Size="11px"

Font-Names="Verdana" ForeColor="Purple" Style="cursor: pointer;"></asp:Label>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</ItemTemplate>

</asp:DataList>

<br />

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

<asp:Button runat="server" ID="btntest" Text="Actualizar" OnClick="updateDate" />

Best wishes,
Marin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now