ImageManager in Editor

[DW Web Team Member]

Hello,

 

I just started working with the ImageManager in the Editor and have a few questions regarding the provided examples.

1. Can the ImageManager window be resize?

2. I believe FileExplorer is used inside ImageManager. When I try to resize the left side of the FileExplorer to make it bigger, the slider  on the right side goes over the right side of Image Manager. Can anything be done to fix this behavior?

3. Can the slider’s visibility be changed dynamically? If yes, then how?

4. In my application I would like to use a physical path in the ImageManager and not virtual. And partially I was able to do so. The problem I have with that is that when I select the file in the FileExplorer, I do not see the image on the Preview panel and there is no info on the Properties panel either. Am I missing something?

 

Thank you

[Fiko]

Hello,

In reference to your questions:

• Can the ImageManager window be resize?
  You need to modify the FileBrowser.ascx file and get reference to the currently opened window and then change its properties.
• 2) and 3) I am not quite sure that I understood your requirements. Could you please provide more information (and/or some visuals) about the expected behavior.
• If you use this content provider, then you need to modify the constructor of the FileItem to looks like this (the change is highlighted):
  

  FileItem fileItem = new FileItem(fileInfo.Name,
                   fileInfo.Extension,
                   fileInfo.Length,
                   virtualPath + fileInfo.Name,
                   url,
                   null,
                   GetPermissions(filePath)
                    );

Greetings,
Fiko
the Telerik team

[DW Web Team Member]

Thank you for the response.

I will try to make myself more clear.

1. Can the ImageManager window be resize?
    By that, I ment if the user can resize the window. Is there any property on the FileManagers that allows the window to be resizable?

2. and 3. Problems with the slider inside the FileManagers.
    You can take a look at your example on the http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx . Please select ImageManager or DocumentManager, for example. A windows that pops up has 2 sides - the left with FileExplorer and the right with the Preview panel and 2 buttons (Insert and Delete). Inside the FileExplorer on the left side there is a TreeView and on the right side - a Grid with the list of the files. They are separated by a splitter. So when I drag the splitter to the right to make the TreeView wider, the slider that is located inside the footer of the grid moves to the right side if the FileExplorer and goes over the Preview panel. 
     With all of that said, I am wondering if this behavior of the slider can be changed so it will stay inside the FileExplorer and will not go over the Preview panel. Another question is if it's possible to hide the slider (make it invisible) when all the files are only on 1 page.

4. Physical path in the FileManagers.
    I already figured this out. However, thank you for the info.

I hope my explanations makes sense.

Thank you again

[Dobromir]

Hello,

In reference to your questions:

1. "Can the ImageManager window be resize?"
   I have attached a demo which shows how to achieve the desired result
2. and 3. "Problems with the slider inside the FileManagers."
   Could you please, set the RadEditor's DialogsCssFile property to point to a file with the following content?
   

   #RAD_SPLITTER_PANE_CONTENT_RadFileExplorer1_paneGrid
   {
       position: relative;
   }

   
   
   

Kind regards,
Dobromir
the Telerik team

[DW Web Team Member]

Hi Dobromir,

Thank you for your response...

1. The demo works and I am able to set up the window's behaviour and properties. However, I have another question to ask. The FileManager window is splited to 2 panels: FileManager and Preview/Properties. In your demo if I make the window wider, the size of the panels is not changed. And I am wondering if it's possible to make the panels' width to be adjustable as well.

2. It works for me. Great!

Looking forward to your response,

Tatiana

[Dobromir]

Hi,

By design, RadEditor's dialogs have fixed size. It is possible to modify the size to be flexible. To do this you need to modify the built-in dialogs and to assign a CSS file to be loaded inside the window using the RadEditor's DialogsCssFile property with the following content:

html, body, form
{
    height:100%;
}
#initializer
{
    height: 100%;
}
#dialogControl
{
    height: 100%;
}
.reDialog.ManagerDialog.NoMarginDialog
{
    height: 100%;
}
#listRow
{
    height: 100%;
}
.imagePreviewer, .imagePreviewer table
{
    height: 100%;
    width: 100%;
    vertical-align: top;
}
.FileExplorerPlaceholder
{
    height: 100%;
}

Please let us know if this helps.

Regards,
Dobromir
the Telerik team

[Cameron]

I am having a problem trying to resize the ImageManager, and DocumentManager of the RadEditor.
Unlike Tatiana, my radeditor is generated as a user control so I am unable to add an eventhandler for the Page_PreRenderComplete event.

Any suggestions?

Thanks,
Cameron

[Rumen]

Hi Cameron,

You can try the following code:

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);
    }

All the best,
Rumen
the Telerik team

[Cameron]

Hi Rumen,

Thanks for your help.

I have one more question.

Although setting the size of the dialog is now a relatively easy thing, it doesn't always work as expected.
And here's why:

Here I set the height of the TableWizard dialog:
In the Page_PreRenderComplete event:

 propertiesDialog = radeditor.GetDialogDefinition("TableWizard"); 
propertiesDialog.Height = System.Web.UI.WebControls.Unit.Pixel(600);

And here's the HTML of what is actually rendered:
<div id="RadWindowWrapper_ctl00_ContentPlaceHolder1_ucMulti_reTest2_dialogOpenerTableWizard" class="RadWindow RadWindow_Office2007 rwNormalWindow rwTransparentWindow" style="width: 740px; height: 539px; visibility: visible; position: absolute; left: 400px; top: 300px; z-index: 3009; " unselectable="on">
<table cellspacing="0" cellpadding="0" class="rwTable" style="height: 539px; "

If I set the Height to be 650px, then it DOES actually render with the height being 650px. And then it's too big. 539px is too small, cutting off the Cancel and OK buttons.

Suggestions?

Thanks again,
Cameron

[Rumen]

Hi Cameron,

The provided code resizes just the RadWindow dialog but not the contents inside it which have fixed size. If you want to customize the appearance of the built-in dialog then you can see how to load the external dialog files in this live demo: Customize Built-in Dialogs.

All the best,
Rumen
the Telerik team

[Jasmin]

I am also looking for solution to -

 

4. Physical path in the FileManagers.
    I already figured this out. However, thank you for the info.

 

Can you please describe, how you fixed it?