Adding a GoogleMap control inside a RadToolTip... incomplete rendering...

[Jess Askey]

Hello...

I am trying to place a GoogleMap inside of a Telerik RadToolTip (Q2 2008) Template and I am having issues with it rendering incompletely... (see photo in this example.

This issue comes down to both the RadToolTip and the RadMenuItem CSS using display: none; for their intial state of the hidden divs. From reading this post  on the googleapi forums, it seems that the suggested manner of solving this problem is by using either visibility: hidden; or by setting the z-index.

Since the CSS is emitted directly from the control... (here is a snippet of my page source)

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none;">

is there any way to change the way that the RadToolTip or the RadMenu renders hidden div's?

The .NET control for including a GoogleMap is available from http://googlemaps.subgurim.net/

My aspx looks like this... pretty simple...  Q2 2008, happens in both both IE6.0 and Firefox 2

<div style="float: left; width: 80px; height: 24px; border-top: 1px solid #383838;text-align: left;">

<span style="margin: 2px;">
<asp:Image ID="ImageSiteMapIcon" runat="server" ImageUrl="~/gearth.gif" /></span>
<span id="sitemaplink" style="color: #fff; font: normal 12px Arial, sans-serif;">SiteMap</span></div>

<telerik:RadToolTip ID="RadToolTipSiteMap" runat="server" HideEvent="FromCode" TargetControlID="sitemaplink" IsClientID="true" RelativeTo="Element" Skin="Default" Position="BottomRight" OffsetX="-15" Animation="Resize" Height="350px" Width="500px" ShowEvent="OnMouseOver" ManualClose="true" >

<asp:UpdatePanel ID="upComments" runat="server">

<ContentTemplate>

<cc1:GMap ID="Map2" runat="server" Height="350px" Width="500px" />

</ContentTemplate>

</asp:UpdatePanel>

</telerik:RadToolTip>

thank you in advance!!

jess

[Svetlina Anati]

Hello Jess,

We were able to reproduce the problem and we researched it further.  However, it seems that the problem comes from the complicated scenario and settings you have made  and this might happen when different third party controls are used in integration.

The problem with the GoogleMap can be reproduced without using RadToolTip at all - all you need to do to observe the issue is to move the map in the DOM and to also have it placed in an absolute positioned element. While researching this we built-up a test demo and I attach it to the thread - please make the map work with this setup which uses only standard elements and in case you succeed, just open a new support ticket and send the standard elements' solution along with detailed explanations. ONce we receive it we will make it work with the RadToolTip as well.



All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jess Askey]

Hello Svetlina...

thank you for your reply... I have the code modified to correctly display the map using standard elements... the only thing I had to change was the style of the hidden div to use 'visibility: hidden;' instead of 'display: none;'

<div id="hidden" class="flow" style="visibility: hidden;">
    <div id="temp">
         <cc1:GMap ID="GMap1" runat="server" Height="350px" Width="500px" Key="http://www.google.com/apis/maps/" />
    </div>
</div>

This solution is detailed at... Google MAP API

When I looked at the RadToolTip source (asp), it appears that the hidden tooltip div uses the display: none css style.

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none;">

I thought that I would be able to override this by making a custom skin and specify my own style for the ToolTipCallout...

div.radtooltip_TrihydroTelerik div.ToolTipCallout
{
    /*display:none;*/
    visibility: hidden;
}

but when I do this... my output for the tooltip div ends up being...

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none; visibility:hidden;">

which doesn't do it either. Is there a way that I can change the way the hidden element is rendered from the RadToolTip control to use 'visibility: hidden' instead?

[Svetlina Anati]

Hi Jess,

I prepared for you sample code which changes the rendered tooltip in the desired manner, with visibility: hidden instead of display:none. In order to do this you should override some of the tooltip methods as shown below:

   <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
        <div>

            <script type="text/javascript">

        TelerikTelerik.Web.UI.RadToolTip.prototype.oldInitialize = Telerik.Web.UI.RadToolTip.prototype.initialize;
        Telerik.Web.UI.RadToolTip.prototype.initialize = function()
        {
          this.oldInitialize();
          setToolTipVisibility(this.get_element());
        };

        TelerikTelerik.Web.UI.RadToolTip.prototype._oldCreateUI = Telerik.Web.UI.RadToolTip.prototype._createUI;
        Telerik.Web.UI.RadToolTip.prototype._createUI = function()
        {
           this._oldCreateUI();
           setToolTipVisibility( this._popupElement);
        };

        TelerikTelerik.Web.UI.RadToolTip.prototype._oldAfterHide =  Telerik.Web.UI.RadToolTip.prototype._afterHide;
        Telerik.Web.UI.RadToolTip.prototype._afterHide = function()
        {
            this._oldAfterHide();
           setToolTipVisibility($get('RadToolTipWrapper_' + this.get_id()));
        };

        TelerikTelerik.Web.UI.RadToolTip.prototype._oldPlayAnimation =  Telerik.Web.UI.RadToolTip.prototype._playAnimation;
        Telerik.Web.UI.RadToolTip.prototype._playAnimation = function()
        {
            this._oldPlayAnimation();
            setToolTipVisibility($get('RadToolTipWrapper_' + this.get_id()));
        };

        function setToolTipVisibility(elt)
        {
            elt.style.display = "";
            elt.style.visibility = "hidden";
            if (Sys.Browser.agent === Sys.Browser.InternetExplorer || this._overlay) {
            var childFrame = elt._hideWindowedElementsIFrame;
            if (childFrame) {
               childFrame.style.visibility = "hidden";
             }
            }
        };

         Telerik.Web.UI.RadToolTip.prototype.isVisible = function()
      {
        var popup = this._popupElement;
        return (popup && popup.style.visibility != "hidden");
      };

            </script>
            <asp:HyperLink ID="target" runat="server">Target control</asp:HyperLink>
            <telerik:RadToolTip Skin="Default" runat="server" ID="RadToolTip1" TargetControlID="target"
                Position="BottomRight" Width="270px" Height="150px" HideEvent="ManualClose">
            </telerik:RadToolTip>
        </div>
    </form>

Please, note, that we do not recommend to change the tooltip's rendering in this manner because this can lead to problems due to not being intensively tested and since the design of the control is different and you decide to change it, we do not support future problems which are caused by this change.

Please, also note that when you have visibility:hidden this means that the element is actually on the page despite it is hidden - it will take the same space as it is actually visible.

For your convenience I attached a sample demo page for you and I hope that you will find it helpful.


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.