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

ToolTipManager unwanted behaviour

4 Answers 81 Views

ToolTip

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

Jocelyn asked on 19 Mar 2012, 04:23 PM

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>

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

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

4 Answers, 1 is accepted

Accepted

answered on 21 Mar 2012, 05:09 PM

override.zip

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.

Accepted