Image Editor inside of FileExplorer

4 posts, 0 answers
  1. Atanas Simeonov
    Atanas Simeonov avatar
    3 posts
    Member since:
    Nov 2009

    Posted 07 Dec 2009 Link to this post

    Hello,
    I'm trying to put Image Editor in File Explorer and I have some progress, but there is still a bugs. This code open image editor instead of default image preview.

    In aspx page:
    <table cellspacing="4"
        <tr> 
          <td rowspan="2" style="vertical-align: top;"
            Browse to an image and click to preview. 
            <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="500px" Height="300px" 
              OnClientItemSelected="OnClientItemSelected" EnableOpenFile="true" OnClientFileOpen="LoadImageEditor" > 
              <Configuration ViewPaths="~/images" UploadPaths="~/images" 
                DeletePaths="~/images" MaxUploadFileSize="5242880" /> 
            </telerik:RadFileExplorer> 
          </td> 
          <td> 
            <fieldset style="width: 270px; height: 270px"
              <telerik:dialogopener runat="server" id="DialogOpener1"></telerik:dialogopener> 
              <legend>Preview</legend> 
              <img id="pvwImage" src="" alt="" style="display: none; margin: 10px; width: 250px; 
                height: 225px;" /> 
            </fieldset> 
          </td> 
        </tr> 
      </table> 
    function OnClientItemSelected(sender, args) 
            { 
                var pvwImage = $get("pvwImage"); 
                var imageSrc = args.get_item().get_url(); 
     
                if (imageSrc.match(/\.(gif|jpg)$/gi)) 
                { 
                    pvwImage.src = imageSrc; 
                    pvwImage.style.display = ""
                } 
                else 
                { 
                    pvwImage.src = imageSrc; 
                    pvwImage.style.display = "none"
                } 
            } 
            function LoadImageEditor(sender, e) 
              { 
                var pvwImage = $get("pvwImage"); 
                if (!pvwImage.src.match(/\.(gif|jpg)$/gi)) return
                var args = {}; 
                args.imageSrc = e.get_item().get_path(); 
                $find('<%= DialogOpener1.ClientID %>').open('ImageEditor', args); 
                e.set_cancel(true); 
              } 
            function ImageEditor_Callback(sender, args) 
            { 
              if(typeof(args) == "undefined"return
              $find('<%= FileExplorer1.ClientID %>').refresh(); 
            } 
    Code behind:
    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); 
            imageEditor.ClientCallbackFunction = "ImageEditor_Callback"
            DialogOpener1.DialogDefinitions.Add("ImageEditor", imageEditor); 

    I hope this article to be helpful.

    Best wishes,
    A. Simeonov
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 09 Dec 2009 Link to this post

    Hello Atanas,

    Thank you for your contribution to the community. Once you are ready, I would suggest to post your solution in the code library section the RadFileExplorer control so other users could benefit from it. We will gladly award you for your work with Telerik points.


    Best wishes,
    Fiko
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jack
    Jack avatar
    2 posts
    Member since:
    Nov 2014

    Posted 26 Jun 2015 in reply to Fiko Link to this post

    Hi there - I am looking to do the same - put the Rad image editor inside / linking to the rad file explorer. Is this functionality possible? Are there any instructions on how to do this?
  5. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 30 Jun 2015 Link to this post

    Hello Jack,

    Implementing a custom content provider in RadImageEditor will allow you to integrate the control with the content of RadFileExplorer. You can find a live implementation of such scenario in the following online demo: http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customcontentprovider/defaultcs.aspx

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top