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

8 posts, 0 answers
  1. Jesper Matthiesen
    Jesper Matthiesen avatar
    8 posts
    Member since:
    Oct 2008

    Posted 29 Oct 2010 Link to this post

    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?
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Nov 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jesper Matthiesen
    Jesper Matthiesen avatar
    8 posts
    Member since:
    Oct 2008

    Posted 03 Nov 2010 Link to this post

    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!
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Nov 2010 Link to this post

    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
  6. Jesper Matthiesen
    Jesper Matthiesen avatar
    8 posts
    Member since:
    Oct 2008

    Posted 04 Nov 2010 Link to this post

    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.
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Nov 2010 Link to this post

    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
  8. Yan
    Yan avatar
    2 posts
    Member since:
    Sep 2011

    Posted 29 Sep 2011 Link to this post

    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
  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 04 Oct 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017