[Solved] Override callImageDialog

[Sune Dyrberg]

Hi,

I have tried to override the image dialog caller by using the following:

Telerik.Web.UI.ImageDialogCaller.prototype.callImageDialog = function()
{

// in here I use the showExternalDialog with a callbackfuntion to open a new customized ImageManager. This works fine, but my problem is - how do i in my callbackfunction update the page that called the imagedialog - for example "Cellproperties.ascx".

} 

[Rumen]

Hello Sune,

All you need to do is to import the external DialogsScript.js file to the editor dialogs by setting the DialogsScriptFile property, e.g.

<telerik:RadEditor ID="re" runat="server" Skin="Default" DialogsScriptFile="~/DialogsScript.js"></telerik:RadEditor>

The DialogsScript.js file should contain the following callback function that will return the selected img information from your custom image dialog to the editor's dialogs that use it:

    Telerik.Web.UI.ImageDialogCaller.prototype.callImageDialog = function()
    {
        var callbackFunction = Function.createDelegate(this, function(sender, args)
        {
            //var img = args.get_value();
            var src = "";
            //if (img && img.getAttribute) src = img.getAttribute("src", 2);
            src = args.Result.getAttribute("src",2);
            if (src)
            {
                this._inputElement.value = src;
                this.raiseEvent("valueSelected");
            }
        });

        var editor = this._editor;
        var oldAdditionalQueryString = editor.get_dialogOpener().get_additionalQueryString();
        var selectedValue = this._inputElement.value;
        var selectedElement = null;
        if (selectedValue)
        {
            //random number is added to make the url unique and force the reload of the dialog.
            //this way we can ensure that the file will be selected when the dialog loads.
            var itemUrl = selectedValue;
            editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString + "&rndnum="+ (new Date()-100) + "&PreselectedItemUrl=" + encodeURIComponent(itemUrl));
            selectedElement = editor.get_document().createElement("img");
            selectedElement.setAttribute("src", itemUrl);
        }
        else
        {
            selectedElement = null;
        }

        var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, selectedElement);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(args, "IMG", editor, "ImageManager");
        editor.showDialog("ImageManager", args, callbackFunction);

        editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString);
    };

Here is the original ImageDialogCaller function taken from the source code:

Telerik.Web.UI.ImageDialogCaller = function(element)
{
    Telerik.Web.UI.ImageDialogCaller.initializeBase(this, [element]);

    //SET FROM SERVER
    this._width = "";
    this._editor = null;
    this._clientStateFieldID = null;
}

Telerik.Web.UI.ImageDialogCaller.prototype =
{
    dispose : function()
    {
        this._inputElement = null;
        if (this._pushButton) this._pushButton.onclick = null;
        this._pushButton = null;
        this._editor = null;
        Telerik.Web.UI.ImageDialogCaller.callBaseMethod(this, 'dispose');
    },

    initialize : function()
    {
        var element = this.get_element();
        this._inputElement = element.getElementsByTagName("INPUT")[0];

        //Initialize the ImageManager button - use it as a simple A element - ignore the fact that it has a javascript EditorButton object attached to it already - this will keep thing simple
        this._pushButton = element.getElementsByTagName("A")[0];
        this._pushButton.title = "ImageSrc";
        if (this._pushButton) this._pushButton.onclick = Function.createDelegate(this, this._onButtonClickHandler);
    },

    _onButtonClickHandler : function(e)
    {
        this.callImageDialog();

    },

    _dialogCallbackFunction: function(sender, args)
    {
        var img = args.get_value();
        var src = "";
        if (img && img.getAttribute) src = img.getAttribute("src", 2);
        if (src)
        {
            this._inputElement.value = src;
            this.raiseEvent("valueSelected");
        }
    },

    callImageDialog: function()
    {
        var callbackFunction = Function.createDelegate(this, this._dialogCallbackFunction);
        var editor = this._editor;
        var oldAdditionalQueryString = editor.get_dialogOpener().get_additionalQueryString();
        var selectedValue = this._inputElement.value;
        var selectedElement = null;
        if (selectedValue)
        {
            //random number is added to make the url unique and force the reload of the dialog.
            //this way we can ensure that the file will be selected when the dialog loads.
            var itemUrl = selectedValue;
            editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString + "&rndnum="+ (new Date()-100) + "&PreselectedItemUrl=" + encodeURIComponent(itemUrl));
            selectedElement = editor.get_document().createElement("img");
            selectedElement.setAttribute("src", itemUrl);
        }
        else
        {
            selectedElement = null;
        }

        var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, selectedElement);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(args, "IMG", editor, "ImageManager");
        editor.showDialog("ImageManager", args, callbackFunction);

        editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString);
    },

    get_width : function()
    {
        return this._width;
    },

    set_width : function(value)
    {
        this._width = value;
    },

    get_editor : function()
    {
        return this._editor;
    },

    set_editor : function(value)
    {
        this._editor = value;
    },

    get_pushButton: function()
    {
        return this._pushButton;
    },

    set_pushButton: function(value)
    {
        this._pushButton = value;
    },

    get_value : function()
    {
        return this._inputElement.value;
    },

    set_value : function(value)
    {
        if (null == value) value = "";
        this._inputElement.value = value;
    }
}
Telerik.Web.UI.ImageDialogCaller.registerClass('Telerik.Web.UI.ImageDialogCaller', Telerik.Web.UI.EditorButton);

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.