This is a migrated thread and some comments may be shown as answers.

[Solved] Image Manager standalone

2 Answers 278 Views

Editor

This is a migrated thread and some comments may be shown as answers.

ric c asked on 24 May 2008, 09:53 AM

Hi we are look at upgrading our editor to the latest version.

Currenly we are using the old editor (7.1.1.0), specifically we are using it in an application where we are using the image manager as a standalone.

as per the kb article http://www.telerik.com/support/kb/article/b454K-keh-b454T-btc-b454c-btc.aspx

we have this in a single ascx that we can load multiple times within a single aspx:

@ register src="~/ImageDialogCaller.ascx" tagname="ImageDialogCaller" tagprefix="uc3" %>

<uc3:imagedialogcaller id="ImageDialogCaller1" editorclientid="<%# RadEditor1.ClientID %>" runat="server" />

<uc3:imagedialogcaller id="ImageDialogCaller2" editorclientid="<%# RadEditor1.ClientID %>" runat="server" />

This works great.

we now want to test with the latest version of the editor, and found the following article:

http://www.telerik.com/support/kb/article/b454K-htg-b454T-bme-b454c-bme.aspx

This works fine in isolation, but when we place it in ascx and then load multiple (as with the old one) we only seem to be able to reference the last loaded ascx.

anyone any ideas on how to achive a multiple use?
Thanks

2 Answers, 1 is accepted

answered on 27 May 2008, 09:51 AM

Here is the code I'm using:
Default.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="TelerikStandaloneEditor.Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="ImageCaller.ascx" TagName="ImageCaller" TagPrefix="wk" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Standalone Editor: multiple</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" />         
        
                    <wk:ImageCaller ID="ImageCaller1" runat="server" /> 
        
                    <wk:ImageCaller ID="ImageCaller2" runat="server" /> 
        
                    <wk:ImageCaller ID="ImageCaller3" runat="server" /> 
        
                </form> 
        
            </body> 
        
            </html>

ImageCaller.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" Codebehind="ImageCaller.ascx.cs" 
        
                Inherits="TelerikStandaloneEditor.ImageCaller" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <div style="margin-bottom: 20px; background-color: #f1f1f1">  
        
                <script type="text/javascript">  
        
                function ImageManagerFunction(sender, args)  
        
                {  
        
                    var selectedItem = args.SelectedItem;  
        
                    var resultImageObject = args.Result;  
        
                    var txt = $get('<%= TbImageUrl.ClientID %>');  
        
                        txt.value = selectedItem.getPath();  
        
                }          
        
                </script> 
        
                <asp:TextBox runat="server" ID="TbImageUrl" Width="400px"></asp:TextBox><br /> 
        
                <telerik:dialogopener runat="server" id="DialogOpener1">  
        
                </telerik:dialogopener> 
        
                <telerik:dialogopener runat="server" id="DialogOpener2">  
        
                </telerik:dialogopener> 
        
                <button onclick="$find('<%= DialogOpener1.ClientID %>').open('ImageManager');return false;">  
        
                    Open ImageManager</button> 
        
            </div>

ImageCaller.ascx.cs

    
            namespace TelerikStandaloneEditor  
        
            {  
        
                public partial class ImageCaller : System.Web.UI.UserControl  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        FileManagerDialogParameters dialogParameters1 = new FileManagerDialogParameters();  
        
                        dialogParameters1.ViewPaths = new string[] { "~/Images" };  
        
                        dialogParameters1.UploadPaths = new string[] { "~/Images" };  
        
                        dialogParameters1.DeletePaths = new string[] { "~/Images" };  
        
                        dialogParameters1.MaxUploadFileSize = 5000000;  
        
                        DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), dialogParameters1);  
        
                        imageManager.ClientCallbackFunction = "ImageManagerFunction";  
        
                        imageManager.Width = Unit.Pixel(694);  
        
                        imageManager.Height = Unit.Pixel(440);  
        
                        DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);  
        
                    }      
        
                }  
        
            }

When I run this I get my 3 ascx loading and each opens the Image Manager ok, but when selecting an image, it always puts it in the last text box?

answered on 28 May 2008, 12:28 PM

Hi Ric,

Here is how to modify the ImageCaller.ascx control to fix the problem:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageCaller.ascx.cs" Inherits="ImageCaller" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div style="margin-bottom: 20px; background-color: #f1f1f1">
    <script type="text/javascript">
    var currentTextBoxID;
    function ImageManagerFunction(sender, args)
    {
        var selectedItem = args.SelectedItem;
        var resultImageObject = args.Result;

        var txt = $get(currentTextBoxID);
        txt.value = selectedItem.getPath();
    }
    </script>
    <asp:TextBox runat="server" ID="TbImageUrl" Width="400px"></asp:TextBox><br />
    <telerik:dialogopener runat="server" id="DialogOpener1">
    </telerik:dialogopener>
    <telerik:dialogopener runat="server" id="DialogOpener2">
    </telerik:dialogopener>
    <button onclick="currentTextBoxID='<%= TbImageUrl.ClientID %>';$find('<%= DialogOpener1.ClientID %>').open('ImageManager');return false;">
        Open ImageManager</button>
</div>

Kind regards,
Rumen
the Telerik team

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