Resize Manager Dialog Windows

22 posts, 0 answers
  1. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 10 Mar 2009 Link to this post

    Hello,

    I am using a RadEditor on it's own page and I want to be able to resize the Manager Dialog boxes that appear on the screen (Image Manager, File Manager, etc).

    I have tried setting the DialogOpener.Window.Behaviors and DialogOpener.Window.InitialBehaviors in code behind and they don't seem to have any effect.  They also don't save in the ASPX page.

    What can I do to allow for these dialog windows to be resizable?

    I am using Q1 2009 beta.

    Shawn
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 13 Mar 2009 Link to this post

    Hi Shawn,

    You can resize the RadWindow dialog using the following server code:

    using Telerik.Web.UI;
    ...

        protected override void OnPreRenderComplete(System.EventArgs e)
        {
            base.OnPreRenderComplete(e);
            DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
            imagePropertiesDialog.Height = Unit.Pixel(900);
            imagePropertiesDialog.Width = Unit.Pixel(900);
        }


    Here are the available dialog names that you should set as a parameter of the GetDialogDefinition method:

    "DocumentManager",
    "FlashManager",
    "SilverlightManager",
    "MediaManager",
    "TemplateManager",
    "AboutDialog",
    "PageProperties",
    "Help",
    "LinkManager",
    "TableWizard",
    "FindAndReplace",
    "CleanPasteHtmlContent"
    "CleanPasteTextContent"
    "ImageEditor",
    "ImageProperties",
    "FormatCodeBlock",
    "ImageMapDialog",
    "XhtmlValidator",
    "TrackChangesDialog",
    "StyleBuilder"


    To modify the content inside the dialogs see this article: Customize Built-in Dialogs.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 13 Mar 2009 Link to this post

    Hi Rumen,

    Do you know if there is a client side way?  I don't have a problem with the initial size of the dialog.  But in certain situations, the user may want to drag the box larger.

    If I set it on the server side, I would need to know the size of the users screen.  Plus the user has no control over it.

    In this case, I don't want to change any of the internal content, just the ability to resize the parent window. 

    Thanks,
    Shawn
  5. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 16 Mar 2009 Link to this post

    Hello soatley,

    With a bit of hacking one might get to the client-side dialog object once that it is open and enable its resizing (the dialog is a plain RadWindow object and does allow for this).

    However, we strongly recommend against doing it because the RadEditor dialogs layout is not resizeable. We see that your assumption is that by resizing the dialog, the dialog's controls/content will get nicely resized as well. This is not the case. The layout's elements and "root wrapper" element have a fixed size. Hacking it further to set it to percantages will simply result in breaking the UI. This is the reason that the RadEditor dialogs are not resizeable in the first place.

    Best wishes,
    Tervel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 16 Mar 2009 Link to this post

    Rumen and Tervel,

    Thanks for the reply.  I guess I will have to settle with the server side re-size.  I have implemented the code that Rumen posted about resizing it on the server side.  This works ok, but the items inside don't resize (as Tervel mentioned). 

    I will submit a feature request asking for the ability to easily resize the RadWindow in future versions. 

    The reason I would really like this is when you are uploading new images (for example), you can upload many images, but as you add additional filename boxes, they don't fit on the screen.  You can resize the upload window, but it can only go so large because the parent Image Manager window can not be resized. 

    On my machine, I have my screens set up around 1920 X 1600 for the monitor resolution.  Others will proabably have around 1280 X 1024.  So, I have to code for the lowest common screen (1280) leaving a bunch of wasted space on my monitor.

    Thanks for your help.  The server side code will work for the time being, but eventually, it would be great to get it to work on the client.

    Shawn
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 18 Mar 2009 Link to this post

    Hi Shawn,

    You can easily achieve your scenario by adding a scroller to the Upload window inside the File Browser dialogs. This could be possible by registering the external editor's dialogs and modifying the FileBrowser.ascx file.

    Here are the complete instructions:
    1. Copy the EditorDialogs installation folder to the root of your web application
    2. Set the ExternalDialogsPath property to point to the EditorDialogs folder, e.g.

      <telerik:RadEditor runat="server" ID="RadEditor1" ExternalDialogsPath="~/EditorDialogs/" ImageManager-ViewPaths="~/" ImageManager-UploadPaths="~/"></telerik:RadEditor>
    3. Open the \EditorDialogs\FileBrowser.ascx file and put the following css class in it below the page and control directives:

      <style type="text/css">
      .rfeUploadContainer
      {
          height: 300px !important;
          overflow: auto !important;
      }
      </style>

    These steps will add a scrollbar to the Upload Window and when the content exceeds the dialog height a vertical scroller will appear on the right side of the dialog.

    For your convenience I have attached my test project.

    All the best,
    Rumen
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 19 Mar 2009 Link to this post

    Thanks for the work around.  This does help a bit. 

    The only change I made to this was that I used max-height instead of height for the CSS.  This was it will expand enough to fit within my Image Manager window size (set on the server side) and then scroll afterwards. 

    I haven't checked how cross-browser compatible max-height is, but the editor will be used by internal staff that have new versions of the popular browsers (Firefox primarily).

    Shawn
  9. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 14 Sep 2009 Link to this post

    Rumen,

    About :

    protected override void OnPreRenderComplete(System.EventArgs e)
        {
            base.OnPreRenderComplete(e);
            DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
            imagePropertiesDialog.Height = Unit.Pixel(900);
            imagePropertiesDialog.Width = Unit.Pixel(900);
        }

    Do you have another way to do it for an editor situated inside an usercontrol ? (no OnPreRenderComplete in this case and PreRender does not work).

    Thank you
    Arnaud



  10. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 16 Sep 2009 Link to this post

    Hi Arnaud,

    You need to put the following code in the codebehind file of the ascx usercontrol:

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
        }
        void Page_PreRenderComplete(object sender, EventArgs e)
        {
            DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
            imagePropertiesDialog.Height = Unit.Pixel(900);
            imagePropertiesDialog.Width = Unit.Pixel(900);
        }


    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 17 Sep 2009 Link to this post

    Nice, thank you Rumen.

    Arnaud
  12. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 19 May 2010 Link to this post

    Hi,

    I have placed this code in codebehind for a user control:
    Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs) 
    MyBase.OnInit(e) 
    AddHandler Me.Page.PreRenderComplete, AddressOf Page_PreRenderComplete 
    End Sub 
     
    Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As EventArgs) 
     
    Dim editor_vorm1 As RadEditor 
    editor_vorm1 = FindControl("Vorm1") 
     
    editor_vorm1.GetDialogDefinition("ImageManager").Height = Unit.Pixel(ConfigurationSettings.AppSettings("ManagerHoogte")) 
    End Sub 
    I still got the message:
    The given key was not present in the dictionary

    Do you have a clue how this can happen?

    Regards,
    Marc



  13. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 21 May 2010 Link to this post

    Hi Fit2Page,

    I was unable to reproduce the problem and for your convenience I have attached my project. Please, test it and use the code in your scenario.

    Greetings,
    Rumen
    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.
  14. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 13 Aug 2010 Link to this post

    Hi Rumen,

    The problem is that the editor is opened in a usercontrol with

    Dim userControl As Control = Page.LoadControl(userControlName)


    probably something goes wrong in the timing of the page's life cycle when I use

    Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs)
    MyBase.OnInit(e)
    AddHandler Me.Page.PreRenderComplete, AddressOf Page_PreRenderComplete
    End Sub

    It works OK when I use
    Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
    MyBase.OnPreRender(e)
    AddHandler Me.Page.PreRenderComplete, AddressOf Page_PreRenderComplete
    End Sub

    Thanks,

    Marc
  15. Mehwish
    Mehwish avatar
    4 posts
    Member since:
    Jan 2011

    Posted 14 May 2012 Link to this post

    Hi,
    I used the following code to resize ImageManeger in radeditor:::

     protected override void OnPreRenderComplete(System.EventArgs e)

        {
            base.OnPreRenderComplete(e);
            DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
            imagePropertiesDialog.Height = Unit.Pixel(900);
            imagePropertiesDialog.Width = Unit.Pixel(900);
        } 

    it works fine if i specify first radeditor name in it. 
    It does not work if i specify more radeditors (in scenario like different radeditors in different views; if i apply this code on first radeditor it works fine; but if i specify radeditor2 of view2)  it throws exception like
    "

    The given key was not present in the dictionary.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary.

    "

    could you help me out to resolve this problem

    Regards,
    Mehwish

  16. Mehwish
    Mehwish avatar
    4 posts
    Member since:
    Jan 2011

    Posted 14 May 2012 Link to this post

    hi,
    sorry for the post because now i have solved it and it worked for all rad editors.

    Regards,
    Mehwish
  17. Darshan
    Darshan avatar
    2 posts
    Member since:
    Jan 2012

    Posted 16 May 2012 Link to this post

    How did you resolve it Mehwish?
    DP

    Update:
    Nevermind Mehwish, I had the code in OnPreRender instead of Page_PreRenderComplete.
  18. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 13 Nov 2013 Link to this post

    Hi Rumen,

    The following code

    Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs)
               MyBase.OnInit(e)
               AddHandler Me.Page.PreRenderComplete, AddressOf Page_PreRenderComplete
           End Sub
     
           Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As EventArgs)
               For Each c As Control In pnlblock.Controls
                   Dim editor As RadEditor = TryCast(c, RadEditor)
                   If Not [Object].Equals(editor, Nothing) Then
                       editor.GetDialogDefinition("DocumentManager").Height = Unit.Pixel(ConfigurationManager.AppSettings("ManagerHoogte"))
                       editor.GetDialogDefinition("DocumentManager").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("FlashManager").Height = Unit.Pixel(ConfigurationManager.AppSettings("ManagerHoogte"))
                       editor.GetDialogDefinition("FlashManager").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("MediaManager").Height = Unit.Pixel(ConfigurationManager.AppSettings("ManagerHoogte"))
                       editor.GetDialogDefinition("MediaManager").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("TemplateManager").Height = Unit.Pixel(ConfigurationManager.AppSettings("ManagerHoogte"))
                       editor.GetDialogDefinition("TemplateManager").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("ImageManager").Height = Unit.Pixel(ConfigurationManager.AppSettings("ManagerHoogte"))
                       editor.GetDialogDefinition("ImageManager").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("ImageMapDialog").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("TableWizard").Width = Unit.Pixel(ConfigurationManager.AppSettings("ManagerBreedte"))
                       editor.GetDialogDefinition("ImageProperties").Width = Unit.Pixel(400)
                   End If
               Next
           End Sub

    is not working anymore when I upgrade my project to ASP.NET 4.5 with Q3 2013

    Can you test please?

    Marc
  19. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Nov 2013 Link to this post

    Hi Marc,

    The described behavior is happening due to changes related to dialog's rendering improvements, introduced in the 2013 Q3 version. Now the dialog's size could be modified only with custom CSS rules in the dialog files. 

    I assume that you have already done custom modifications to the built-in dialogs and that you are familiar with the approach for that action. If - not, please follow the online demo titled "Customize Built-in Dialogs" for more information.

    To modify the size you will need to know the dialog's name (you can use the dev toolbar and inspect it) and the used Skin name. Next you should insert an additional Style tags in the dialog's markup and set a custom CSS rule like the following one:
    .redImageManager.RadForm_Silk body {
        height: 580px;
        width: 830px;
    }

    Note that the above one is only an example for the such customization. To reach the expected result, please use the following pattern:
    .red<DialogsName>.RadForm_<Skin> body {
        height: HHHpx;
        width: WWWpx;
    }


    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  20. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 15 Nov 2013 Link to this post

    Hi,
    We ended up with the following styles in EditoDialogs/FileBrowser.ascx in order to resize the contents of the Manager dialogs:

    <style>
        /*wrappers*/
        .redWrapper {width: 935px;height:696px!important;}
        .redWrapper .redFBWrapper {overflow:hidden;}
         
        /*filemanager*/
        .redFEWrapper {width:520px!important;height:696px!important;}
        .redFEWrapper .rfeThumbnailView {width:288px!important;height:580px!important;}
        .redFEWrapper .rgDataDiv {width:298px!important;height:570px!important;}
        .redFEWrapper #RadFileExplorer1_splitter,
        .redFEWrapper .rfeListViewContainer,
        .redFEWrapper .RadSplitter.RadSplitter_Default,
        .redFEWrapper #RAD_SPLITTER_PANE_CONTENT_RadFileExplorer1_paneGrid,
        .redFEWrapper #RAD_SPLITTER_PANE_CONTENT_RadFileExplorer1_paneTree,
        .redFEWrapper .rfeThumbnailsContainer {height:644px!important;overflow:hidden!important;}
        .redFEWrapper #RadFileExplorer1_rfeThumbnailView {width:96%!important;}
         
        /*seperator*/
        .redDialogSeparator {height:697px!important;}
         
        /*previewers*/
        .redFBDialogContent {width:406px!important;height:696px!important;overflow:hidden;}
        .redFBDialogContent #imageMultiPage,
        .redFBDialogContent #templateIframe,
        .redFBDialogContent #documentMultiPage,
        .redFBDialogContent #mediaMultiPage,
        .redFBDialogContent #flashMultiPage {height:638px!important;}
         
        .redFBDialogContent .templatePreviewer,
        .redFBDialogContent .flashPreviewer,
        .redFBDialogContent .imagePreview {height:610px!important;}
         
        .redFBDialogContent .redFBDialogContentButton.redActionButtonsAbsoluteWrapper {bottom:1px!important;}
         
        </style>

    Of course all the pixel values are for a fixed manager Dialog size, in this case ImageManager,ascx :
    <style type="text/css">
    .reDialog.ImageProperties {
    }
    .redImageManager.RadForm_Default body {
    height: 696px;
    width: 935px;}
    </style>

    I hope this helps somebody...

    Marc
  21. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Nov 2013 Link to this post

    Hi Marc,

    Thank you for providing your solution with our community. It is highly appreciated.

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  22. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 20 Nov 2013 Link to this post

    I am running into another problem with the managers when I use them in a stand-alone scenario, opened through RadDialogOpener, CSS code added in de manager .ascx files..

    Scenario #1 for Documentmanager goes OK:
    .redDocumentManager.RadForm_Default body {
    height: 696px;
    width: 935px;}

    Scenario #2 for ImageManager, the RadWindow seems to pickup the height but not the width of the content:
    .redImageManager.RadForm_Default body {
    height: 696px;
    width: 935px;}

    Could you reproduce this behavior?

    Marc


  23. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 20 Nov 2013 Link to this post

    Solved it, there was no CSS problem.

    The caveat was a bug in the way to invoke the RadDialogOpener


    FAIL WAS USING:
    onclick="$find('<%= StandAlone2.ClientID %>').open('ImageManager2', {CssClasses: []}, null,'ImageManager2');return false;"

    instead of
    onclick="$find('<%= StandAlone2.ClientID %>').open('ImageManager', {CssClasses: []}, null,'ImageManager2');return false;"


    Never came out till I installed Q3 2013...

    Marc
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017