Customizing Existing Dialogs & Custom Dialogs

[Axe]

I have been reading alot of the documentation in regards to Customizing Dialogs and I can't seem to work it out. I downloaded the current zip version (2008.1 619). The EditorDialogs folder contains all the dialogs but the docs don't seem to correspond to the current content of dialogs ascx files. For example if I want to hide or disable tabs which are now in a toolbar.
If I customize a dialog how can I use it as the dialogs seem to be embedded in dll's? So I searched a bit more and I found the section on Adding Custom Dialogs and you create a new DialogDefinition class and pass in either a type of dialogType or a string of virtualPath in the constructor. I added the EditorDialogs folder to my project and tried adding the ImageManager.ascx file into contructor but got the 'Object reference not set to an instance of an object' error. Is there another way to do this? 

If that is not possible then I guess I need to create custom dialog from scratch. If I create from scratch then is it possible to utilize existing built in controls such as the widgets controls eg. <widgets:GenericFileLister>. How and what would I need to wire these up. I can think of a lot of custom dialogs that are either existing managers that I alter or taking advantage of a bunch of the widget controls to build dialogs from scratch. I have read alot of the docs and searched forums/knowledge base/code library and found bits and pieces that give me hope but I feel like I am shooting in the dark.

What I specifically want to build now is a dialog based on any of the file browser dialogs, it could be file based or implement a custom FileBrowserContent Provider. The file browser will list mp3 files that when clicked will use a Flash mp3 player to play the selected track so you can preview the track and if the track you want is not there then the user can upload the new track. I know I can build a totally custom dialog but it seems that so much of the functionality is already so close to what I want.

Regards
Axe

[Rumen]

Hi Axe,

The Customizing Dialogs article should be invisible in the help, because it applies to the old RadEditor. If you want to customize the existing RadEditor dialog then copy the EditorDialogs folder from the RadControls for ASP.NET AJAX installation to the root of your application and set the ExternalDialogsPath property to point to it, e.g.

<telerik:radeditor id="RadEditor1" ExternalDialogsPath="~/EditorDialogs"  runat="server"></telerik:radeditor>

After that open the ascx file of the dialog that you want to customize and edit its code. You can find more examples on how to use the ExternalDialogsPath solution in the forums.

If this does not help, then you can create your own custom dialog from scratch by using the showExternalDialog method of RadEditor, which will allow you to open your own aspx page from a custom button and insert content in the editor from it. For your convenience I have attached an example how to use the showExternalDialog method.

Unfortunately, the <widgets:GenericFileLister> control cannot be used in custom dialogs.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Axe]

Thanks for the info.
How can I do it with a standalone dialogOpener? I have been looking around for the same property but can't find it.

What I have so far:

<telerik:dialogopener runat="server" id="ImageDialog"  />
<button onclick="$find('<%= ImageDialog.ClientID %>').open('ImageManager');return false;">Select Image</button>

<div id="previewPane"></div>

<script type="text/javascript">
function ImageManagerFunction(sender, args)
{
    CreateImgPreview(args.Result.src,'previewPane',200,200);
    var path = args.SelectedItem.getPath();
}
</script>

    protected void Page_Load(object sender, EventArgs e)
    {
        string myContentProviderTypeName = typeof(CustomEditorFileProvider).AssemblyQualifiedName;

        FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
        imageManagerParameters.ViewPaths = new string[] { "~/Images" };
        imageManagerParameters.UploadPaths = new string[] { "~/Images" };
        imageManagerParameters.DeletePaths = new string[] { "~/Images" };
        imageManagerParameters.MaxUploadFileSize = 5000000;
        imageManagerParameters.FileBrowserContentProviderTypeName = myContentProviderTypeName;

        DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);
        //DialogDefinition imageManager = new DialogDefinition("./EditorDialogs/ImageManager.ascx", imageManagerParameters);
        imageManager.ClientCallbackFunction = "ImageManagerFunction";
        imageManager.Width = Unit.Pixel(694);
        imageManager.Height = Unit.Pixel(440);

        ImageDialog.DialogDefinitions.Add("ImageManager", imageManager);

        ImageManagerDialogParameters imageEditorParameters = new ImageManagerDialogParameters();
        imageEditorParameters.ViewPaths = new string[] { "~/Images" };
        imageEditorParameters.UploadPaths = new string[] { "~/Images" };
        imageEditorParameters.DeletePaths = new string[] { "~/Images" };
        imageEditorParameters.MaxUploadFileSize = 5000000;
        imageEditorParameters.EnableImageEditor = false;

        DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imageEditorParameters);

        imageEditor.Width = Unit.Pixel(832);
        imageEditor.Height = Unit.Pixel(520);
        ImageDialog.DialogDefinitions.Add("ImageEditor", imageEditor);



        FileManagerDialogParameters documentManagerParameters = new FileManagerDialogParameters();
        documentManagerParameters.ViewPaths = new string[] { "~/Documents" };
        documentManagerParameters.UploadPaths = new string[] { "~/Documents" };
        documentManagerParameters.DeletePaths = new string[] { "~/Documents" };
        documentManagerParameters.MaxUploadFileSize = 5000000;


        DialogDefinition documentManager = new DialogDefinition(typeof(DocumentManagerDialog), documentManagerParameters);
        documentManager.ClientCallbackFunction = "DocumentManagerFunction";
        documentManager.Width = Unit.Pixel(694);
        documentManager.Height = Unit.Pixel(440);

        ImageDialog.DialogDefinitions.Add("DocumentManager", documentManager);


    }

Regards

[Rumen]

Hi Axe,

The ExternalDialogsPath property is a property of RadEditor only and it cannot be used with the DialogOpener control. The standalone dialogs are not intended to be customized. If you want to modify the contents of the standalone image manager the only possible way is by using javascript. Here is an example how to get a referenvce to the image manager and hide its toolbar:

<telerik:dialogopener runat="server" id="ImageDialog"  />
<button onclick="OpenImageManager();return false;">Select Image</button>
 
<div id="previewPane"></div>
 
<script type="text/javascript"> 
function OpenImageManager()
{
    var imgDialog = $find('<%= ImageDialog.ClientID %>');
    imgDialog.open('ImageManager');
    window.setTimeout(function()
    {
        var frame = window.frames["ImageDialogImageManager"];  //get a reference to the Image Manager dialog frame
        //search for the desired html objects and manipulate them with javascript
        //for example find and hide the file manager toolbar
        frame.document.getElementById("fileManagerToolBar").style.display="none";
    }, 1000);
}
function ImageManagerFunction(sender, args) 
{ 
    CreateImgPreview(args.Result.src,'previewPane',200,200); 
    var path = args.SelectedItem.getPath(); 
} 
</script>

Have a nice weekend,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Axe]

Thanks for your help.

I will just build something myself and use a RadWindow.

Regards
Axe

[Axe]

At first I couldn't find the button with frame.document.getElementById("fileManagerToolBar") but after some debugging and searching the dom I found out it was:
frame.document.getElementById("dialogControl_ImageManager_FileLister1_ImageEditorCaller")
I thought I would post in case someone else was looking.

Other useful ones:

(

"dialogControl_ImageManager_FileLister1_CreateNewDirectory")

(

"dialogControl_ImageManager_FileLister1_Delete")

Regards
Axe

[Axe]

Just one more thing and this is more a general javascript question is that instead of using window.setTimeout function it would be better to perform the function on the iframe pages onload event. If I keep at 1000 then users on slower connection will get errors as the page is not loaded and if I make much longer then those with faster connections will see those nuttons for the timeout's duration.  From a javascript perspective how can I do this?
I tried something that dosn't work but I'm don't know alot of javascript I'm guessing I need to attach the handler somehow. I will search for it but if you do read this and know can you post please.

var

frame = window.frames["ImageDialogImageManager"];

frame.body.onload(

function(){alert('loaded')};

Regards
Axe

[Tervel]

Hello Axe,


You should try something along the following lines:

//Get frame/iframe by ID
var frame = document.getElementById("SOME_ID");

frame.contentWindow.document.body.onload =

function()
{
    alert('loaded');
}

Regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Axe]

Have you removed the id's for each of the buttons in the latest release? I can't seem to find them now. There is an id for the button row 'fileManagerToolBar' but everything inside is id-less.

[Axe]

What I ended up doing is:

var frame = window.frames["ImageDialogImageManager"];

var fileManagerToolBar = frame.document.getElementById("fileManagerToolBar");

var listitems = fileManagerToolBar.getElementsByTagName('li');

listitems[4].style.display=

"none"

I also tried the onload function you provided above but I can't get it to work. I get an error when using this function:

function OpenImageManager()

{

var imgDialog = $find('<%= ImageDialog.ClientID %>');

imgDialog.open(

'ImageManager');

var frame = window.frames["ImageDialogImageManager"];

frame.contentWindow.document.body.onload =

function()

{

alert(

'loaded');

//hide buttons

}

}

Basically contentWindow.document is null.
I can use window.setTimeout() but like I mentioned I am wondering what will happen if a user has a slow connection and the dialog has not opened before the timeout period.

[Rumen]

Hi Axe,

I have good news that you can set the ExternalDialogsPath property via the DialogDefinitions collection of the DialogOpener control, e.g.

FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
imageManagerParameters.ViewPaths = new string[] { "~/Images" };
imageManagerParameters.UploadPaths = new string[] { "~/Images" };
imageManagerParameters.DeletePaths = new string[] { "~/Images" };
imageManagerParameters.MaxUploadFileSize = 5000000;
    
DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);
imageManager.ClientCallbackFunction = "ImageManagerFunction";
imageManager.Width = Unit.Pixel(694);
imageManager.Height = Unit.Pixel(440);
imageManager.Parameters["ExternalDialogsPath"] = "~/EditorDialogs/";

ImageDialog.DialogDefinitions.Add("ImageManager", imageManager);

This will help you to modify directly the ImageManager.ascx control placed inside the EditorDialogs folder.


Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Axe]

That's great. I will start playing with that right away.

Regards
Axe

[Kevin Warnke]

I'm trying to use this for modifying the dialogs for the DocumentManager (2009 Q2) but it doesn't seem to be "seeing" my changes.

Everything is running fine but I'm editing the DocumentManager.ascx to hide the LinkManager but it still shows up.

Is there something special you need to do to get this to work with DocumentManager (I've gotten this to work with ImageManager as defined above).

Thanks,
Kevin

[Kevin Warnke]

This is very strange.  I came down this morning and the exact same code that was NOT working last night was working this morning.  Go figured.  Darn gremlins.

Thanks,
Kevin

[d]

The image in ImagEditor disappears just after loading the ImageEditor.Can somebody help me out with this? I can preview the image in the image browser and when I click on Image Editor option, the image shows up on loading the Image Editor but disappears in a second. The images are loaded from a mapped drive, which points to a location on a server different to the one on which the Rad Editor is running.

[Rumen]

Hi,

Please, open the web.config file and ensure that the Telerik.Web.UI.WebResource handler is registered in the

Copy Code

<httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />
</httpHandlers>

and

Copy Code

<handlers>
  <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
  <add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" />
  <add name="Telerik_Web_UI_SpellCheckHandler_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" />
</handlers>

sections. If it is not registered you will experience the reported problem.

Greetings,
Rumen
the Telerik team

[d]

Thank a lot for your reply. That was really helpfull.

[IT Dev]

Hello!

I have the same code, but my dialog opener is not "seeing" my changes....

 

<span id="spanImageManager" runat="server">
<button onclick="$find('<%= DialogOpener1.ClientID %>').open('ImageManager', {CssClasses: []});return false;">Change Image</button>
 </span>
<telerik:RadDialogOpener runat="server" ID="DialogOpener1" AdditionalQueryString="" HandlerUrl="Telerik.Web.UI.RadDialogHandler.axd" Style="display: none;" />

FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
imageManagerParameters.ViewPaths = new string[] { "~/Images/partners" };
imageManagerParameters.UploadPaths = new string[] { "~/Images/partners" };
imageManagerParameters.DeletePaths = new string[] { "~/Images/partners" };
imageManagerParameters.MaxUploadFileSize = 131072000;

DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);
imageManager.ClientCallbackFunction = "ImageManagerFunction";
imageManager.Width = Unit.Pixel(694);
imageManager.Height = Unit.Pixel(440);
imageManager.Parameters["ExternalDialogsPath"] = "~/EditorDialogs/";

DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);

Please help!

[IT Dev]

Using the custom dialog decided to work by itself! just like the post above, the day after, it was working fine.

I ended up creating a custom control to extend the RadFileExplorer (to change the order of the items in the Context Menu) to be able to change its behavior inside the FileBrowser.ascx that is inside the ImageManagerDialog together with the ImageManager.ascx

Thanks!