Click here to Skip to main content
15,867,594 members
Articles / Web Development / ASP.NET
Tip/Trick

How to Reset RadImageEditor Telerik Control

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
29 Sep 2014CPOL2 min read 11.9K   2  
This tips is about to fix image reset issue in RadImageEditor Telerik Control

Introduction:

Recently we got an issue in ImageEditor of Telerik control in our project. Actually we are using Telerik control for adding html content, images to create template in our project as Telerik provides RadImageEditor control so that we can add/edit/preview image and also content during template creation.

Issue description:

During template creation we had a requirment to add image to content so we selected an image through image manager then clicked on ‘image editor’ and save. Then again we selected another, different image and opened that image in ‘image editor’ again. But it opened the previous image selected the first time around and did not let us edit the recent image.

Solution:

Telerik is a third party tool and this issue is an existing issue i got from Google.

To fix this issue first of all we need the code for Telerik. We got the code from our client’s server at path C:\Program Files\Telerik\RadControls for ASP.NET AJAX Q2 2011 as it is a licensed version. There was an folder named ‘EditorDialogs’ which contains code for all Telerik controls.

After that we put ‘EditorDialogs’ folder in our application and mapped the path in telerik control in the .aspx page with attribute ‘ExternalDialogsPath’.

Here is the syntax for the same

ExternalDialogsPath="~/EditorDialogs"

Example:

<telerik:RadEditor runat="server" ID="ContentEditor" ExternalDialogsPath="~/EditorDialogs" Height="515px"
                                                     DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                                                     ToolsFile="~/App_Data/DefaultToolsFile.xml"
                                                     ContentFilters="DefaultFilters">
    <ImageManager ViewPaths="~/Document" UploadPaths="~/Document" DeletePaths="~/Document">                               
    </ImageManager>                               
</telerik:RadEditor>

The next step was to find out the file or code where ImageEditor functionality is defined for Telerik.

There is an Usercontrol/.ascx file named as ‘ImageEditor.ascx’ which contains all the functionality. The ImageEditor.ascx file contains some properties for set and get RadImageEditor value. We had to reset the RadImageEditor so that it can select and view recent image.

So, in set properties added the following fix to reset editor

$find("RadImageEditor1").fire("Reset", null);

RadImageEditor Control syntax:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Height="450" Width="816" EnableResize="false">
                    <Tools>
                        <telerik:ImageEditorToolGroup>
                            <telerik:ImageEditorTool CommandName="Print" />
                            <telerik:ImageEditorToolSeparator />
                            <telerik:ImageEditorToolStrip CommandName="Undo" />
                            <telerik:ImageEditorToolStrip CommandName="Redo" />
                            <telerik:ImageEditorTool CommandName="Reset" />
                            <telerik:ImageEditorToolSeparator />
                            <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true"/>
                            <telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true"/>
                            <telerik:ImageEditorTool CommandName="Zoom" IsToggleButton="true"/>
                            <telerik:ImageEditorTool CommandName="ZoomIn"/>
                            <telerik:ImageEditorTool CommandName="ZoomOut"/>
                            <telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true"/>
                            <telerik:ImageEditorTool CommandName="RotateRight" />
                            <telerik:ImageEditorTool CommandName="RotateLeft" />
                            <telerik:ImageEditorTool CommandName="FlipVertical" />
                            <telerik:ImageEditorTool CommandName="FlipHorizontal" />
                            <telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />
                        </telerik:ImageEditorToolGroup>
                    </Tools>
                </telerik:RadImageEditor>
</telerik:RadAjaxPanel>

Here is the code for set property after fix in ImageEditor.ascx

set_src: function (src)
{
    //Set path in the hidden field and if not available, use src
    this._src = src;
    var field = this._originalImageLocation;
    var oldValue = field.value;
    field.setAttribute("value", src);
    if (oldValue != src)
    {
        // Reset RadImageEditor
        $find("RadImageEditor1").fire("Reset", null);
        //Set the src of the image in RadImageEditor. 
        //This makes the next ajax request invisible for the user.
        this.set_previewImageSrc(src);
        //Send an ajax request the ImageUrl property of RadImageEditor gets initialized on the server.
        this._ajaxPanel.ajaxRequest();
     }
},

Hopefully this will be helpful...

Thanks,

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Mindfire Solutions
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --