DialogOpener directly on the page

[Axe]

Hi

I was searching the forums for any solutions and came across this post: http://www.telerik.com/community/forums/thread/b311D-hhmbg.aspx 

There was reference to this functionality -
Another still undocumented feature is the ability to put a dialog control like ImageManager directly on the page, without the need to open it in a dialog.

Is there any solution for this?

Regards
Alex

[Rumen]

Hi Alex,

We planed to provide the ability to put a file browser dialog control directly on the page, without the need to open it in a dialog, but we abandon it because it introduced implementation difficulties to the end users. It is much easier to involve the image manager as a dialog.

If you explain your scenario better we can offer you some workaround or an appropriate suggestion how to achieve it (if possible).

Best regards,
Rumen
the Telerik team

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

[Axe]

Sorry for the late reply.

I am happy to use in dialog I was curious if this had been implemented.

Another question: How can I hide/disable the 'Image Editor' button or any button for the Image Manger? If I don't add Dialog Definitions for an Image Editor it shows the button but does nothing just like if I don't add a delete path it will disable the delete button. This will do as it prevents usage but was wondering if it can be hidden.

And another 2 questions:

1. Is it possible to set focus to the newly created image from Image Editor so that you can press Insert without having to select the new image first
2. I assume I need to implement a custom ImageEditorDialog to change the name and behavior of the new image created in the Image Editor much like I did when overridding the StoreFile method below it's just that when I look at the ImageEditorDialog class it dosn't seem to have the methods so I'm guessing I need to override another class

using System;
using System.Web;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Web.UI.Editor.DialogControls;
using Telerik.Web.UI.Widgets;

public partial class Test2 : System.Web.UI.Page
{
    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);
        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;

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

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

    }
}

public class CustomEditorFileProvider : FileSystemContentProvider
{
    public CustomEditorFileProvider(HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag)
        : base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)
    {
    }
    public override string StoreFile(UploadedFile file, string path, string name, string[] arguments)
    {
        string fileName = base.StoreFile(file, path, name, arguments);

        //Do some extra stuff here

        return fileName;
    }
}

[Axe]

Sorry one more question.... or two:

With the javascript methods for callback I found here in the forums the getPath() method. are there any others? I just wanted the file name.

function ImageManagerFunction(sender, args)

{

var selectedItem = args.SelectedItem;

var resultImageObject = args.Result;

var path = selectedItem.getPath();

var file = selectedItem.???;

var other = resultImageObject.???

}

I tried using the Image Editor in Safari and some of the functions don't work. It works fine when in normal editor but not dialog opener. I am using the code above.

Thanks

[Rumen]

Hi Axe,

Up to the questions:

1) Please review the following KB article that shows how to achieve the desired behavior:
http://www.telerik.com/support/kb/article/b454K-htg-b454T-a-b454c-a.aspx

Just change the following code:

 FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
        imageManagerParameters.ViewPaths = new string[] { "~/Images" };
        imageManagerParameters.UploadPaths = new string[] { "~/Images" };
        imageManagerParameters.DeletePaths = new string[] { "~/Images" };
        imageManagerParameters.MaxUploadFileSize = 5000000;
        // If you don't set the following property, the default value will be used
        // imageManagerParameters.SearchPatterns = new string[] { "*.jpg" };

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

With this one:

ImageManagerDialogParameters imageManagerParameters = new ImageManagerDialogParameters();
        imageManagerParameters.ViewPaths = new string[] { "~/Images" };
        imageManagerParameters.UploadPaths = new string[] { "~/Images" };
        imageManagerParameters.DeletePaths = new string[] { "~/Images" };
        imageManagerParameters.MaxUploadFileSize = 5000000;
        imageManagerParameters.EnableImageEditor = false;
        // If you don't set the following property, the default value will be used
        // imageManagerParameters.SearchPatterns = new string[] { "*.jpg" };

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

If you still experience problems please do not hesitate to contact us.

2) You can easily see the available properties of the selectedItem object by placing a debugger; under
var selectedItem = args.SelectedItem;  string, e.g.

function ImageManagerFunction(sender, args)
{

    var selectedItem = args.SelectedItem;
    debugger;
    var resultImageObject = args.Result;
    var path = selectedItem.getPath();
    var file = selectedItem.name;
    var other = resultImageObject.???
}

You can see the attached screenshot for more information.

Best regards,
Rumen
the Telerik team

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

[Axe]

Thanks for your help.

I didn't realize there was a property to enable/disable image manager. The debugging thing I worked out by accident when I had a javascript error.
Now I got the basics out of the way I'm trying to customize dialogs and build custom dialogs using controls from widget class which I posted about here.

Thanks again for your support.