ToolTipManager unwanted behaviour

5 posts, 2 answers
  1. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 19 Mar 2012 Link to this post

    Hi,

    I use a ToolTipManager for a RadChart. The problem is that, I have a grid also on the same page and there is unwanted tooltip added on the grid because of the ToolTipManager. I set the ToolTipZoneID to my ChartID and It affect my Grid for I don't know why.

    Here is my code:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Labos.aspx.vb" Inherits="GESPHARxLite_2.Labos" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
     
    <script src="Scripts/Resizer.js" type="text/javascript"></script>
     
    <head runat="server">
        <title></title>
        <link href="css/GESPHARxLite.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            html, body, form
            {
                margin: 0;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="gridLabos">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="chartLabos" LoadingPanelID="RadAjaxLoadingPanel1"
                            UpdatePanelHeight="100%" />
                        <telerik:AjaxUpdatedControl ControlID="gridLabos" LoadingPanelID="RadAjaxLoadingPanel1"
                            UpdatePanelHeight="100%" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="chartLabos" />
                        <telerik:AjaxUpdatedControl ControlID="isInitialLoad" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <div id="hiddenFields">
            <input id="isInitialLoad" type="hidden" runat="server" value="1" />
        </div>
        <div id="gridDiv">
            <telerik:RadGrid ID="gridLabos" runat="server" Height="200px">
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <ClientSettings>
                    <Selecting CellSelectionMode="None"></Selecting>
                </ClientSettings>
                <MasterTableView>
                    <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                    <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="labo_noauto" FilterControlAltText="Filter colHeure column"
                            HeaderText="NoAuto" ShowFilterIcon="False" UniqueName="colNoAuto" Visible="false"
                            ReadOnly="true" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridImageColumn FilterControlAltText="Filter colStatutImg column" AllowFiltering="false"
                            HeaderText="" ImageHeight="" ImageWidth="" UniqueName="colStatutImg" HeaderStyle-Width="30">
                            <HeaderStyle Width="30px" ></HeaderStyle>
                        </telerik:GridImageColumn>
                        <telerik:GridDateTimeColumn DataField="Date" FilterControlAltText="Filter colDate column"
                            HeaderText="Date" UniqueName="colDate" ShowFilterIcon="False" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridBoundColumn DataField="labo_heure" FilterControlAltText="Filter colHeure column"
                            HeaderText="Heure" ShowFilterIcon="False" UniqueName="colHeure" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labt_numero" FilterControlAltText="Filter colTypeTest column"
                            HeaderText="Type de test" ShowFilterIcon="False" UniqueName="colTypeTest" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labt_description" FilterControlAltText="Filter colDescription column"
                            HeaderText="Description" ShowFilterIcon="False" UniqueName="colDescription" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_valeur" FilterControlAltText="Filter colValeur column"
                            HeaderText="Valeur" ShowFilterIcon="False" UniqueName="colValeur" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="unim_code" FilterControlAltText="Filter colMesure column"
                            HeaderText="Unité mesure" ShowFilterIcon="False" UniqueName="colMesure" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_normal_min" FilterControlAltText="Filter colMin column"
                            HeaderText="Minimum" ShowFilterIcon="False" UniqueName="colMin" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_normal_max" FilterControlAltText="Filter colMax column"
                            HeaderText="Maximum" ShowFilterIcon="False" UniqueName="colMax" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_statut" FilterControlAltText="Filter colStatut column"
                            HeaderText="Statut" ShowFilterIcon="False" UniqueName="colStatut" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_usager" FilterControlAltText="Filter colUsager column"
                            HeaderText="Usager" ShowFilterIcon="False" UniqueName="colUsager" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="labo_commentaire" FilterControlAltText="Filter colCommentaire column"
                            HeaderText="Commentaire" ShowFilterIcon="False" UniqueName="colCommentaire" CurrentFilterFunction="StartsWith"
                            FilterDelay="700" FilterControlWidth="100%">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="Date" SortOrder="Descending" />
                    </SortExpressions>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                    <FilterItemStyle Width="100%" />
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="true">
                </ClientSettings>
            </telerik:RadGrid>
        </div>
        <div id="chartDiv">
            <telerik:RadChart ID="chartLabos" runat="server" Skin="Mac" DefaultType="Line" Style="width: 100%;"
                IntelligentLabelsEnabled="True">
                <ChartTitle>
                    <Appearance Position-AlignedPosition="Top">
                        <FillStyle MainColor="">
                        </FillStyle>
                    </Appearance>
                    <TextBlock Text="Évolution des résultats">
                        <Appearance TextProperties-Font="Tahoma, 13pt">
                        </Appearance>
                    </TextBlock>
                </ChartTitle>
                <Appearance TextQuality="AntiAlias">
                    <FillStyle FillType="Image">
                        <FillSettings ImageDrawMode="Flip" BackgroundImage="{chart}" ImageFlip="FlipX">
                        </FillSettings>
                    </FillStyle>
                    <Border Color="138, 138, 138"></Border>
                </Appearance>
                <PlotArea>
                    <EmptySeriesMessage Visible="True">
                        <TextBlock Text="Sélectionnez un test pour voir l'évolution des résultats">
                        </TextBlock>
                    </EmptySeriesMessage>
                    <XAxis LayoutMode="Inside" AutoScale="false" LabelStep="5" IsZeroBased="false">
                        <Appearance ValueFormat="ShortDate">
                            <MajorGridLines PenStyle="Solid" Color="209, 222, 227"></MajorGridLines>
                            <LabelAppearance RotationAngle="45" Position-AlignedPosition="Top">
                            </LabelAppearance>
                            <TextAppearance TextProperties-Color="51, 51, 51">
                            </TextAppearance>
                        </Appearance>
                        <AxisLabel>
                            <TextBlock>
                                <Appearance TextProperties-Color="51, 51, 51">
                                </Appearance>
                            </TextBlock>
                        </AxisLabel>
                    </XAxis>
                    <YAxis AxisMode="Extended">
                        <Appearance Color="134, 134, 134" MinorTick-Color="134, 134, 134" MinorTick-Width="0"
                            MajorTick-Color="134, 134, 134">
                            <MajorGridLines Color="209, 222, 227"></MajorGridLines>
                            <MinorGridLines Color="233, 239, 241"></MinorGridLines>
                            <TextAppearance TextProperties-Color="51, 51, 51">
                            </TextAppearance>
                        </Appearance>
                        <AxisLabel>
                            <TextBlock>
                                <Appearance TextProperties-Color="51, 51, 51">
                                </Appearance>
                            </TextBlock>
                        </AxisLabel>
                    </YAxis>
                    <Appearance Dimensions-Margins="60, 60, 90, 60">
                        <FillStyle MainColor="White" FillType="Solid">
                        </FillStyle>
                        <Border Color="134, 134, 134"></Border>
                    </Appearance>
                </PlotArea>
                <Legend Visible="false">
                    <Appearance Position-AlignedPosition="TopRight" Dimensions-Margins="0%, 3%, 1px, 1px">
                        <ItemMarkerAppearance Figure="Square">
                            <Border Color="134, 134, 134"></Border>
                        </ItemMarkerAppearance>
                        <FillStyle MainColor="">
                        </FillStyle>
                        <Border Color="Transparent"></Border>
                    </Appearance>
                </Legend>
            </telerik:RadChart>
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Telerik"
                Width="200px" Animation="Slide" Position="TopCenter" EnableShadow="true" ToolTipZoneID="chartLabos"
                AutoTooltipify="true">
            </telerik:RadToolTipManager>
        </div>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     
            <script type="text/javascript">
            <!--
                function Resize()
                {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    var arg1 = $(document).width();
                    var arg2 = $(document).height() - $("#gridLabos").height() - 2;
                    ajaxManager.ajaxRequest(arg1 + "," + arg2);
                }
            -->
            </script>
     
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

    Thanks.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3597 posts

    Posted 21 Mar 2012 Link to this post

    Hi Jocelyn,

    You can try setting the ToolTipZoneId property to the ClientID of the chart in the code-behind, or setting it to the chart id with the prefix "im" as this is how its image map is rendered, or to the div that wraps the chart.

    I would also advise that you examine this online demo that shows how to manage the tooltips more precisely. You can combine it with the client-side API of the tooltipmanager and avoid the ajax request.

    Also, does this behavior occur only after an AJAX request? When the page is first loaded things should be working fine. If so, I can also suggest that you try the attached function override with respect to the Autotooltipify functionality and let me know how it works for you. It must be placed at the end of the form tag.

    Greetings,
    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
  4. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 22 Mar 2012 Link to this post

    Hi Marin,

    I tried your solutions and none worked for me.

    I got errors in the file you sent to me. Are you sure the syntax is correct?

    I got this "Uncaught syntaxError: unexpected token function"

    on this line "$T.RadToolTipManager.prototype._trackPageUpdates function (){"

    thanks.
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3597 posts

    Posted 26 Mar 2012 Link to this post

    Hello,

    I am sorry for the typo. The second line should be:
    $T.RadToolTipManager.prototype._trackPageUpdates = function (){

    Try this and let me know how it goes.

    Greetings,
    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.
  6. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 26 Mar 2012 Link to this post

    Hi,

    thanks for your help, it works perfectly!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017