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 154 Views

Dock

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

7 Answers, 1 is accepted

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

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!

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

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

<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

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

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

<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

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