Resize Manager Dialog Windows

[hacker]

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

[Rumen]

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.

[hacker]

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

[Tervel]

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.

[hacker]

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

[Rumen]

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.

[hacker]

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

[arnaud]

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

[Rumen]

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.

[arnaud]

Nice, thank you Rumen.

Arnaud

[Fit2Page]

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

[Rumen]

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.

[Fit2Page]

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

[Mehwish]

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

[Mehwish]

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

Regards,
Mehwish

[Darshan]

How did you resolve it Mehwish?
DP

Update:
Nevermind Mehwish, I had the code in OnPreRender instead of Page_PreRenderComplete.

[Fit2Page]

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

[Ianko]

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

[Fit2Page]

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

[Ianko]

Hi Marc,

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

Regards,
Ianko
Telerik

[Fit2Page]

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



[Fit2Page]

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