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

Iframe in raddock

5 Answers 119 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Philippe
Top achievements
Rank 1
Philippe asked on 19 Nov 2008, 01:45 AM
Dear Telerik,

I am using a RadDock with an iframe in the ContentTemplate, the src attribute of the iframe is set in the template. Once the dock is moved, the content of the iframe is set to the original src. That means that when our users are navigating in the iframe, if they move the docks afterward, they lose the page they were in.

This bug does not seem to be present in IE but can easily be reproduced in FF.

Please, don't tell me to use a RadWindow instead.

Regards.

5 Answers, 1 is accepted

Sort by
0
Petko
Telerik team
answered on 19 Nov 2008, 11:58 AM
Hi Philippe,

This problem is related to FF and it appears when you move an iframe in the DOM. You can easily reproduce it with the code below:
<head id="Head1" runat="server">  
    <title>Untitled Page</title> 
    <script type="text/javascript">  
    function MoveIt()  
    {  
        $get("div2").appendChild($get("frame1"));  
    }  
    </script> 
</head> 
<body> 
     <form id="form1" runat="server">  
       <asp:scriptmanager id="ScriptManager" runat="server" /> 
    <div> 
     <input type="button" value="MoveIframe" onclick="MoveIt()" /> 
     <div id="div1" style="border:1px solid red; min-height:20px">  
        <iframe src="http://www.google.com" width="490px" height="470px" id="frame1"></iframe> 
     </div> 
     <div id="div2" style="border:1px solid green;  min-height:20px">  
     </div>   
     </div> 
    </form> 
</body> 
When you move a RadDock, it will be moved in the DOM and the iframe will be reloaded. 
For now, we can't provide you a workaround for this issue.

Best wishes,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Philippe
Top achievements
Rank 1
answered on 19 Nov 2008, 03:38 PM
Hi Petko,

Given the Dock is floating and added to the form element, I am surprised to learn it is moved in the dom. Shouldn't it's top and left style properties be changed when dragged instead of changing the parent node?

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 21 Nov 2008, 09:42 AM
When the RadDock is docked to a zone, it's position is relative to the parent RadDockZone. Once you start dragging it, position will be absolute and it's top and left style properties will be changed. Once you dock it again, the RadDock position goes relative to the parent RadDockZone.
0
Philippe
Top achievements
Rank 1
answered on 24 Nov 2008, 03:29 PM
Dear Obi-Wan,

Hmm, maybe I didn't make it clear enough in my previous post that the dock had it's DockMode set to DockMode.Floating. Given that's the case, I think it's position should always be set to absolute, moving it in the dom seems like a bug to me.
0
Petio Petkov
Telerik team
answered on 27 Nov 2008, 12:38 PM
Hi Philippe,

The good news are that we managed to isolate and fix the problem with the iframe under Firefox. The fix will appear in next official RadControls for ASP.NET AJAX release. Till then you can use the workaround below:

<%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
    <title>Untitled Page</title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>  
    <div>  
        <telerik:RadDock ID="RadDock1" runat="server" Title="dock1">  
            <ContentTemplate>  
                <iframe src="http://www.google.com" style="width:300px;height:300px"></iframe>  
            </ContentTemplate>  
        </telerik:RadDock>  
    </div>  
    <script type="text/javascript">  
    Telerik.Web.UI.RadDock.prototype._startDragDrop = function()  
    {  
        var element = this.get_element();  
        this.originalZIndex = element.style.zIndex;  
 
        var bounds = this._getBounds(element);  
        var dockBorderBox = this._getBorderBox(element);  
          
        bounds.width -= dockBorderBox.horizontal;  
        bounds.height -= dockBorderBox.vertical;  
          
        element.style.width = bounds.width + "px";  
        element.style.zIndex = "9999999";  
          
        var location = $telerik.getLocation(element);  
 
        //Fix:Firefox: dock with Iframe - causes Iframe reload  
        if (element.parentNode != this._form)  
        {  
                this._form.appendChild(element);  
        }  
     
        var zone = $find(this.get_dockZoneID());  
        if (zone)  
        {  
            zone._showPlaceholder(this, location);  
        }  
          
        this._setLocation(location);  
    };    
     Telerik.Web.UI.RadDock.prototype.undock = function()  
    {  
        var element = this.get_element();  
        if (element.parentNode != this._form)  
        {  
                this._form.appendChild(element);  
        }  
          
        var location = this._getLocation(element);  
        this.set_left(location.x);  
        this.set_top(location.y);  
          
        var zone = $find(this.get_dockZoneID());  
        if (zone)  
        {  
            this.set_dockZoneID("");  
            zone._resetDockIndices();  
            this._unfitWidth();  
        }  
        this._setPinUnpinVisibility();        
        this.updateClientState();  
    };  
    </script>  
    </form>  
</body>  
</html> 

Keep in mind that if you dock/undock a RadDock to/from a RadDockZone the problem will still exists - this problem is related to firefox and we can't do more about it.
Your telerik points were updated.

Let us know if you face any other problems.

Sincerely yours,
Petio Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Dock
Asked by
Philippe
Top achievements
Rank 1
Answers by
Petko
Telerik team
Philippe
Top achievements
Rank 1
Obi-Wan Kenobi
Top achievements
Rank 1
Petio Petkov
Telerik team
Share this question
or