Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Using the Image and Document managers outside RadEditor

Using the Image and Document managers outside RadEditor

Article Info

Rating: 4

Article information

Article relates to

 RadEditor for ASP.NET AJAX
 Telerik.Web.UI (v.2009.1.311+)

Created by

 Rumen Zhekov, Telerik

HOW-TO
Use the image and documents manager dialogs outside RadEditor for ASP.NET AJAX

SOLUTION
You can easily show the Image and Document managers or any other *Manager dialog without RadEditor, using the code below:

Default.aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
    function ImageManagerFunction(sender, args)
    {
        if (!args)
        {
            alert('No file was selected!');
            return false;
        }
 
        var selectedItem = args.get_value();
 
        var txt = $get('<%= TextBox1.ClientID %>');
        if ($telerik.isIE)
        {
            txt.value = selectedItem.outerHTML;  //this is the selected IMG tag element
        }
        else
        {
            var path = args.value.getAttribute("src", 2);
            txt.value = "<img src='" + path + "' />";
        }
    }
 
    function DocumentManagerFunction(sender, args)
    {
        //debugger;
        if (!args)
        {
            alert('No file was selected!');
            return false;
        }
 
        var selectedItem = args.get_value();
        var path = args.value.src;
 
        var txt = $get('<%= TextBox1.ClientID %>');
        if ($telerik.isIE)
        {
            txt.value = selectedItem.outerHTML;
        }
        else
        {
            var path = args.value.pathname;
            txt.value = "<a href='" + path + "'>" + path + "</a>";
        }
    }
 
    function OpenDocManager()
    {
        var args = new Telerik.Web.UI.EditorCommandEventArgs("DocumentManager", null, document.createElement("a"));
        args.CssClasses = [];
 
        $find('<%= DialogOpener1.ClientID %>').open('DocumentManager', args);
    }
</script>
<asp:TextBox runat="server" ID="TextBox1" Width="400px"></asp:TextBox><br />
<telerik:DialogOpener runat="server" ID="DialogOpener1"></telerik:DialogOpener>
<button onclick="$find('<%= DialogOpener1.ClientID %>').open('ImageManager', {CssClasses: []});return false;">
    Open ImageManager</button>
<button onclick="OpenDocManager();return false;">
    Open Document Manager</button>


Default.aspx.cs
using System;  
using System.Data;  
using System.Configuration;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
using Telerik.Web.UI;  
using Telerik.Web.UI.Editor.DialogControls;  
 
public partial class _Default : System.Web.UI.Page   
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        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);  
        //If you need to customize the dialog then register the external dialog files  
        //imageManager.Parameters["ExternalDialogsPath"] = "~/EditorDialogs/";  
 
        DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);  
 
 
        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);  
 
        DialogOpener1.DialogDefinitions.Add("DocumentManager", documentManager);  
 
        FileManagerDialogParameters imageEditorParameters = new FileManagerDialogParameters();  
        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);  
        DialogOpener1.DialogDefinitions.Add("ImageEditor", imageEditor);     
    }  
} 

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.