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
18 Answers, 1 is accepted
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

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
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

I will just build something myself and use a RadWindow.
Regards
Axe

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

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
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


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.
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

Regards
Axe

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

Thanks,
Kevin

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.
Please, open the web.config file and ensure that the Telerik.Web.UI.WebResource handler is registered in the
<
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
<
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


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!

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!