Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

OnClientDockPositionChanged and iframe inside RadDock. Why iframe page being reloaded?

7 Answers 131 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Jesper Matthiesen
Top achievements
Rank 1
Jesper Matthiesen asked on 29 Oct 2010, 01:23 PM
Hi, I am using raddock with iframe inside. When I am drag'n'droping raddock to different position - iframe content disappears and when I release raddock to the target place - the page inside iframe is being reloaded! Why? I don't want this... How to prevent reloading iframe page and disappearing its content in the moment of dragging the raddock?

7 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 02 Nov 2010, 02:20 PM
Hello Jesper,

The RadDock control  hides all <iframe/> elements currently present on the page. This is because the <iframe/> captures the events of the dock when it is dragged over the <iframe/>, and the control might behave unexpectedly. That's why I recommend using the RadWindow control for this purpose. Here is a link to one of its demos: http://demos.telerik.com/aspnet-ajax/window/examples/default/defaultcs.aspx.

All the best,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jesper Matthiesen
Top achievements
Rank 1
answered on 03 Nov 2010, 10:33 AM
Greetings!
Thanks for the reply.

Our requirements are: we need docking functionality and we need iframes.
Now everything is ALMOST ok: we have the main page with widgets (separate pages), every of each is inside own raddock -> iframe
Could you please provide us with short example of adding one more intermediate layer to this structure, radwindow?

We want to preserve everything we now have PLUS we need to eliminate iframe source reloading when dragging. Also, we do not need any radwindow decoration (styles).

We have the components bought, so we could also submit a support ticket, if required, for resolving this issue.

Thanks in advance!
0
Pero
Telerik team
answered on 03 Nov 2010, 03:28 PM
Hi Jesper,

You can make the RadDock behave exactly as the RadWindow control (not hiding the iframe present within the control itself), by a simple JavaScript code run when the docks are initialized. Here is what you should do:

  • Handle the OnClientInitialize method of every dock having an <iframe/> as its content
  • Get a reference to the <iframe/>
  • Using the dock's resizeExtender set the <iframe/> to be skipped when hiding the iframes on the page.

Here is a simple project that implements the above mentioned scenario:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function OnClientInitialize(dock, args)
        {
            var resizeExtender = dock._resizeExtender;
            var iframe = dock.get_contentContainer().getElementsByTagName("iframe")[0];
            if (iframe) resizeExtender.set_iframeToSkip(iframe);
        }
    </script>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                    Height="400px" OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <iframe src="http://www.google.com" style="width: 200px; height: 200px"></iframe>
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                    Height="400px" OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <iframe src="http://www.telerik.com" style="width: 300px; height: 300px"></iframe>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jesper Matthiesen
Top achievements
Rank 1
answered on 04 Nov 2010, 05:29 PM
Hi.
Thanks for the code.
We tried this approach a little bit and it works fine in IE.

BUT

it does not work in Firefox :( - page reload happens there. The same in Chrome...

Please, confirm if it has been fixed in the latest version of Telerik. We are using version 2010.2.826.40 currently.
0
Pero
Telerik team
answered on 10 Nov 2010, 01:17 PM
Hi Jesper,

The reloading indeed happens, but is not directly related to the RadDock control. The content of the <iframe/> is refreshed, because the dock's HTML element is moved in the DOM tree, when the user drags the control from a zone to zone, or zone to a place anywhere on the page.
To show this I move an <iframe/> from one place in the DOM tree to another one using JavaScript. Here is the code, notice that the refresh still occurs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        .divIframe
        {
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <input type="button" value="Move the Iframe" onclick="MoveIframe();" /></div>
    <div id="div2" class="divIframe">
    </div>
    <div id="div1" class="divIframe">
        <iframe id="telerikIframe" src="http://www.telerik.com" style="width: 300px; height: 300px"></iframe>
    </div>
    <script type="text/javascript">
        function MoveIframe()
        {
            var telerikIframe = $get("telerikIframe");
            var div1 = $get("div1");
            var div2 = $get("div2");
 
            if (telerikIframe.parentNode.id == "div1")
            {
                div2.appendChild(telerikIframe);
            } else
            {
                div1.appendChild(telerikIframe);
            }
        }
        function OnClientInitialize(dock, args)
        {
            var resizeExtender = dock._resizeExtender;
            var iframe = dock.get_contentContainer().getElementsByTagName("iframe")[0];
            if (iframe) resizeExtender.set_iframeToSkip(iframe);
        }
    </script>
    </form>
</body>
</html>

I researched the internet and couldn't find a solution to work around this issue in FF or Chrome.

Note: In case your docks are with DockMode=Floating, please attach the following method to the OnClientInitialize event:
    function OnClientInitialize(dock, args)
    {
        var resizeExtender = dock._resizeExtender;
        var element = dock.get_element();
        var iframe = dock.get_contentContainer().getElementsByTagName("iframe")[0];
        if (iframe) resizeExtender.set_iframeToSkip(iframe);
 
        if (element.parentNode != dock._form)
        {
            dock._form.appendChild(element);
        }
    }
</script>



Kind regards,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Yan
Top achievements
Rank 1
answered on 29 Sep 2011, 05:15 PM
Hi, 
I'm in trouble with this issue too. 
The solution above can only skip one iframe at each drag event. 
Is there any way we can skip all iframes? I tried calling "resizeExtender.set_iframeToSkip(iframe);" for each iframe we have in the page but only the last one got skipped. 
Thanks. 

Chris
0
Slav
Telerik team
answered on 04 Oct 2011, 01:52 PM
Hello Yan,

By changing the handler of the RadDock's client event OnClientInitialize as shown below, the iframes inside all dock controls will be displayed. Please keep in mind that, as Pero already mentioned, the <iframe/> captures the events of the dock when it is dragged over the <iframe/>, which will most probably lead to an unexpected behavior.
function OnClientInitialize(dock, args) {
    dock._resizeExtender.set_hideIframes(false);
}


Regards,
Slav
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
Tags
Dock
Asked by
Jesper Matthiesen
Top achievements
Rank 1
Answers by
Pero
Telerik team
Jesper Matthiesen
Top achievements
Rank 1
Yan
Top achievements
Rank 1
Slav
Telerik team
Share this question
or