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

Dialogs in an iframe

10 Answers 267 Views

Editor

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

10 Answers, 1 is accepted

answered on 21 Aug 2008, 02:06 PM

This has been an issue that I've reported for a long time now, with the RadEditor (or the stand-alone dialogs) inside of a RadWindow (which is also an IFrame) that is smaller than the size of the dialogs. A couple of solutions where proposed some time back but nothing ever came of it. Personally, I would like to re-open this topic for serious discussion as it remains one of the very few bad bugs with the suite.

As I've said before, when a dialog is open it ought to be considered the current user's primary interaction. Because of this, it should appear on top of everything else that is currently open, sized and positioned relative to the browser window. If not a built-in feature, hopefully somebody can figure out a way to wire up the plumbing so that the top-level page is capable of opening the dialog no matter how deeply nested within a complicated IFrame structure, and then returning the result to the calling frame.

The client-side part of this is probably fairly easy, I don't know if the server-side part of it is as clean (for setting up the DialogOpener) - particularly if we're trying to replace the built in *Manager from a RadEditor. For example, how do you tell the RadEditor where the DialogOpener is located, and how does it set the necessary properties? That hurts my head, and hopefully the many people who are smarter than I at Telerik can get it figured out some day.

Shaun.

answered on 27 Aug 2008, 02:49 PM

Hi guys,

This topic is not forgotten. In fact we were working on getting the RadWindow to load in the parent frame - but with dubious success. The bottomline is that the MS AJAX framework, on top of which the Telerik suite is built is not designed to allow for creating rich controls in a document other than where the ScriptManager resides.

Thus we had to abandon the idea. It seems that the only way to go in this scenario is to provide a property that will run the heavyweight browser windows (e.g. window.open) instead of the skinnable RadWindow. We have included this on our TODO list for the current Q3 2008, and the functionality will appear either in Q2 SP2, or at Q3 at latest.

Best regards,
Tervel
the Telerik team

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

answered on 31 Mar 2009, 10:05 PM

It wasn't fixed, but with the Q1 2009 release I was pleasantly suprised by a change in the behaviour of the dialogs which does allow for (what I think) is an acceptible work-around.

This change in behaviour is that the dialogs seem to be calling the onClientClose of its RadWindow in all three possible user action cases - 1) Clicking Insert, 2) Clicking Cancel, and 3) Clicking the X of the RadWindow. It used to be that when the user closed the window without selecting anything, that it wasn't possible to execute any script on the calling page. Now it does by default - which I'm sure is also causing some headaches (easy to fix) but has a huge side-benefit of being able to resize the parent window when the dialog opens, and then resize it back when the dialog closes (since onClientClose is *always* called). Here's a MasterPage with the javascript where I'm doing just this:

    
            <%@ Master Language="VB" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <script runat="server">  
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
              <title>Data Entry Form</title> 
        
              <style type="text/css">  
        
                html, body, form { height: 100%; margin: 0px; padding: 0px; overflow:hidden; background:#ffffff; }  
        
              </style> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server">  
        
              <telerik:RadScriptManager ID="smModal" runat="server" /> 
        
              <telerik:RadStyleSheetManager runat="server" ID="ssmModal" /> 
        
              <telerik:RadAjaxManager ID="ramModal" runat="server" /> 
        
              <telerik:RadDialogOpener ID="doModal" runat="server" /> 
        
              <telerik:RadFormDecorator ID="rfdModal" runat="server" DecorationZoneID="modalBody" DecoratedControls="RadioButtons,CheckBoxes" /> 
        
              <telerik:RadSplitter runat="server" ID="rsModal" Height="100%" Width="100%" Orientation="Horizontal">  
        
                <telerik:RadPane runat="server" ID="rpContent" Scrolling="Y">  
        
                  <div id="modalBody">  
        
                    <asp:ContentPlaceHolder ID="cM" runat="server">  
        
                    </asp:ContentPlaceHolder> 
        
                  </div> 
        
                </telerik:RadPane> 
        
                <telerik:RadPane runat="server" ID="rpCommands" Height="32px" Scrolling="None" BackColor="#dddddd">  
        
                  <asp:UpdateProgress ID="UpdateProgress" runat="server" DynamicLayout="true" DisplayAfter="0">  
        
                    <ProgressTemplate> 
        
                      Updating...&nbsp;&nbsp;Please Wait  
        
                    </ProgressTemplate> 
        
                  </asp:UpdateProgress> 
        
                  <asp:UpdatePanel runat="server" ID="upModal" RenderMode="Inline" UpdateMode="Conditional">  
        
                    <ContentTemplate> 
        
                      <span class="modalFeedback">  
        
                        <asp:Literal runat="server" ID="litFeedback" Text="Ready" /> 
        
                      </span> 
        
                      <ul class="commands">  
        
                        <asp:ContentPlaceHolder ID="cC" runat="server">  
        
                        </asp:ContentPlaceHolder> 
        
                        <li class="cancel"><a onclick="JustClose()">Cancel</a></li>  
        
                      </ul> 
        
                    </ContentTemplate> 
        
                  </asp:UpdatePanel> 
        
                </telerik:RadPane> 
        
              </telerik:RadSplitter> 
        
              <telerik:RadCodeBlock ID="rcbModal" runat="server">  
        
                <script language="javascript" type="text/javascript">  
        
                  function get_RadWindow() { var oWindow = null; if (window.radWindow) { oWindow = window.radWindow; } else if (window.frameElement.radWindow) { oWindow = window.frameElement.radWindow; } return oWindow; }  
        
                  function set_WindowSize(w, h) {  
        
                    var oWnd = get_RadWindow();  
        
                    var sh = get_parentPage().get_WinHeight(); var sw = get_parentPage().get_WinWidth();  
        
                    if (h >= sh) { h = sh - 40; ww = w + 20; } if (w >= sw) { w = sw - 40; }  
        
                    oWnd.set_height(h); oWnd.set_width(w); oWnd.center(); return;   
        
                  }  
        
                  function get_parentPage() { return get_RadWindow().BrowserWindow; }  
        
                  function CloseAndRebind(HFID) { get_parentPage().postBackHF(HFID); get_RadWindow().Close(); }  
        
                  function JustRebind(HFID) { get_parentPage().postBackHF(HFID); }  
        
                  function JustClose() { get_RadWindow().Close(); return false; }  
        
                  var _wOld; var _hOld; var _resized = false;  
        
                  function OpenImageManager() { resizeBeforeDialog(740, 500); $find('<%= doModal.ClientID %>').open('ImageManager'); }  
        
                  function resizeBeforeDialog(w, h) { _resized = true; var oWnd = get_RadWindow(); _wOld = oWnd.get_width(); _hOld = oWnd.get_height(); set_WindowSize(Math.max(_wOld, w), Math.max(_hOld, h)); }  
        
                  function resizeAfterDialog() { if (_resized) { _resized = false; set_WindowSize(_wOld, _hOld); } }  
        
                  function set_Image(sender, args) { resizeAfterDialog(); if (args) { var src = args.get_value().src.toLowerCase(); var path = src.substring(src.indexOf("/public/")); var img = get_ImageImg(); if (img) { img.src = path; } var txt = get_ImageTxt(); if(txt) {txt.value = path;} } }  
        
                  function set_NoImage() { get_ImageImg().src = ''; get_ImageTxt().value = ''; }  
        
                </script> 
        
              </telerik:RadCodeBlock> 
        
              </form> 
        
            </body> 
        
            </html>

answered on 03 Apr 2009, 04:33 PM

radeditorinradwindow.zip

Hi Shaun,

Thank you for sharing your interesting solution with our community.

We would also like to tell that we have implemented an AutoSize feature in RadWindow which is useful in this scenario. We have attached a sample project where the AutoSize feature is used and helps to produce the same effect with less code.

Another approach is to use the set_useClassicDialogs(true); method and the solution provided in the following KB article: Using browser modal dialog instead of RadWindow.

All the best,
Rumen
the Telerik team

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

answered on 06 Apr 2009, 02:47 PM

Excellent.

Now that I think more about it though, this doesn't really help me all that much anyway. My solution of using a 100% X 100% RadSplitter in the MasterPage of the RadWindow-based forms allows me to keep a "command bar" in view all the time and then scrolls the form when needed. The AutoSize looks at the height / width of the splitter - which is extremely small since the only height that is set is that of the bottom "command bar" pane. I think I'm going to throw together a quick code library project showing this off since I've had a huge positive response to this new design - my old design had the "insert / update" buttons at the top of the form on a single page, which scrolled out of view if the window was too small for the content.

Shaun.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Dialogs in an iframe

10 Answers, 1 is accepted