Dynamic Tooltip Problem

2 posts, 1 answers
  1. Teo
    Teo avatar
    3 posts
    Member since:
    Oct 2011

    Posted 16 Dec 2011 Link to this post

    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">
     
    <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 />
                <br />
                <asp:Label runat="server" ID="lblfechasel" Font-Size="10px" ForeColor="#CC0000" Font-Names="Verdana"></asp:Label>
                <br />
                <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 />
                <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
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 19 Dec 2011 Link to this post

    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 />
                <br />
                <asp:Label runat="server" ID="lblfechasel" Font-Size="10px" ForeColor="#CC0000" Font-Names="Verdana"></asp:Label>
                <br />
                <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 />
                <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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top