Dialogs in an iframe

11 posts, 0 answers
  1. Ilia
    Ilia avatar
    22 posts
    Member since:
    Jun 2008

    Posted 20 Aug 2008 Link to this post

    We have a slight problem with those...
    The old school version of the RadEditor (that we are trying to replace now) used popup windows to render dialogs, while the new one uses floating div's.That is all fine until you place editor into an iframe. Opening dialog in an iframe that is not big enough to fit it produces obvious and pretty ugly results...
    Any workaround suggestions would be much appreciated
  2. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 21 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 27 Aug 2008 Link to this post

    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.
  5. Kevin Warnke
    Kevin Warnke avatar
    98 posts
    Member since:
    Dec 2005

    Posted 31 Mar 2009 Link to this post

    Was this ever fixed?

    I'm running into the problem now with opening a dialog inside a RadWindow.

    Thanks,
    Kevin
  6. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 31 Mar 2009 Link to this post

    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"><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> 
     
  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 03 Apr 2009 Link to this post

    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.
  8. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 03 Apr 2009 Link to this post

    Hi Rumen,

    It's easy to miss the .autoSize() function of the RadWindow when it's completely undocumented ;)

    Since we're on that topic though, do you know if the autoSize feature checks to make sure that it does not resize itself beyond the boundaries of its parent?  I've been doing this manually for years but it means that I have to explicitly state the size of every window when it opens, which then sizes itself accordingly whilst checking to make sure it doesn't get bigger than the boundaries of the caller.

    Shaun.
  9. Kevin Warnke
    Kevin Warnke avatar
    98 posts
    Member since:
    Dec 2005

    Posted 03 Apr 2009 Link to this post

    Shaun-

    Being that I'm recently new to Telerik (I used their controls back in 2006/2007 but haven't for a while) I've been spending a lot of time in the samples and documentation.  They actually do have a sample with the auto size feature:

    http://demos.telerik.com/aspnet-ajax/window/examples/autosize/defaultcs.aspx

    I'm not a huge fan of the window randomly changing size, though, so I'm not sure I'll use that.  I'll just plan ahead and make sure any windows I open are large enough to support the dialogs if they are to be used.

    Thanks to both for an update.

    Kevin
  10. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 04 Apr 2009 Link to this post

    Hi Kevin,

    Thanks for the link to the demo - I guess I prefer to have things in the online help and that's where there's no mention of it ;)

    The solution I posted doesn't randomly change the size though - it is very specific about when and how big to resize the original window.  The reason I put it in the MasterPage code is that it also allows me to nest windows within windows.  I took out some of the code for doing that but can post a sample code project sometime if interested.

    Shaun.
  11. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 06 Apr 2009 Link to this post

    Hi Shaun,

    1. The autoSize() client-side method will be documented in the next update of the Telerik Help.

    2. The feature does take into account the size of the parent (another IFRAME/RadWindow or RestrictionZone) to ensure it is not larger.

    I hope the small sample we pasted will be useful to you - we plan to convert it to an example and add it to our online demos.

    Best regards,
    Tervel
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  12. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 06 Apr 2009 Link to this post

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