Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Drag-and-drop Images in RadEditor

Drag and Drop a node from the RadTreeView in the RadEditor's content area:


  • Marketing
    • Advertisements
    • Products
    • ad_color_picker.gif
    • ad_tables.gif
    • banner.gif
    • new_folders_sorting.gif
  • PublicRelations
  • Templates
Preview
Click a node to see its preview...
   
 
 
 
 
   

  • Drag and Drop Images in RadEditor

    This example shows integration of RadTreeView and RadEditor. You can drag and drop images from RadTreeview into RadEditor. This can be easily achieved by handling the following events client-side:

    • OnClientNodeDragStart - Create and display an overlay to prevent the editor content area from capturing mouse events
    • OnClientNodeDragging - Change the cursor's visual appearance according to its position its toolbar will appear docked at the top of the page
    • OnClientNodeDropping - Paste the image into the RadEditor and remove the overlay

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" Theme="Default" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Editor.TreeviewAndEditor.DefaultVB" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:headtag id="Headtag1" runat="server" />
        <style type="text/css">
            .TelerikModalOverlay
            {
                z-index: 100000 !important;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:header id="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <qsf:InformationBox ID="InformationBox1" runat="server" Title="Drag and Drop a node from the RadTreeView in the RadEditor's content area:">
        </qsf:InformationBox>
        <br />
        <table width="97%" summary="Resource Browser">
            <tr>
                <td valign="top" style="width: 400px;" class="module">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" EnableDragAndDrop="True"
                        OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging"
                        OnClientNodeDropping="OnClientNodeDropping" OnClientNodeClicking="BeforeClick"
                        Width="200px" Skin="Default">
                    </telerik:RadTreeView>
                    <fieldset style="margin-left: 30px; width: 130px; height: 130px">
                        <legend>Preview</legend>
                        <table style="width: 100%; height: 100%">
                            <tr>
                                <td id="previewPane" align="center" valign="middle">
                                    Click a node to see its preview...
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
                <td style="padding-left: 20px" valign="top">
                    <telerik:RadEditor OnClientLoad="OnClientLoad" SkinID="BasicSetOfTools" Width="500"
                        Height="500" ID="RadEditor1" runat="server">
                        <Content>
                        Some sample content.... Some sample content...
                                &nbsp;
                        </Content>
                    </telerik:RadEditor>
                </td>
                <td>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
    //<![CDATA[

            function OnClientLoad(editor)
            {
                var tree = $find("<%= RadTreeView1.ClientID %>");
                makeUnselectable(tree.get_element());
            }

            function OnClientNodeDragStart()
            {
                setOverlayVisible(true);
            }

            function OnClientNodeDropping(sender, args)
            {
                var editor = $find("<%= RadEditor1.ClientID %>");
                var event = args.get_domEvent();

                document.body.style.cursor = "default";

                var result = isMouseOverEditor(editor, event);
                if (result)
                {
                    var imageSrc = args.get_sourceNode().get_value();
                    if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1))
                    {
                        var imageSrc = "<img src='" + imageSrc + "'>";
                        editor.setFocus();
                        editor.pasteHtml(imageSrc);
                    }
                }
                setOverlayVisible(false);
            }


            function OnClientNodeDragging(sender, args)
            {
                var editor = editor = $find("<%= RadEditor1.ClientID %>");
                var event = args.get_domEvent();

                if (isMouseOverEditor(editor, event))
                {
                    document.body.style.cursor = "hand";
                }
                else
                {
                    document.body.style.cursor = "no-drop";
                }
            }


            /* ================== Utility methods needed for the Drag/Drop ===============================*/

            //Make all treeview nodes unselectable to prevent selection in editor being lost
            function makeUnselectable(element)
            {
                var nodes = element.getElementsByTagName("*");
                for (var index = 0; index < nodes.length; index++)
                {
                    var elem = nodes[index];
                    elem.setAttribute("unselectable", "on");
                }
            }

            //Create and display an overlay to prevent the editor content area from capturing mouse events
            var shimId = null;
            function setOverlayVisible(toShow)
            {
                if (!shimId)
                {
                    var div = document.createElement("DIV");
                    document.body.appendChild(div);
                    shimId = new Telerik.Web.UI.ModalExtender(div);
                }

                if (toShow) shimId.show();
                else shimId.hide();
            }


            //Check if the image is over the editor or not
            function isMouseOverEditor(editor, events)
            {
                var editorFrame = editor.get_contentAreaElement();
                var editorRect = $telerik.getBounds(editorFrame);

                var mouseX = events.clientX;
                var mouseY = events.clientY;

                if (mouseX < (editorRect.x + editorRect.width) &&
                 mouseX > editorRect.x &&
                    mouseY < (editorRect.y + editorRect.height) &&
                 mouseY > editorRect.y)
                {
                    return true;
                }
                return false;
            }



            /* ================== These two methods are not related to the drag/drop functionality, but to the preview functionality =======*/

            function Scale(img, width, height)
            {
                var hRatio = img.height / height;
                var wRatio = img.width / width;

                if (img.width > width && img.height > height)
                {
                    var ratio = (hRatio >= wRatio ? hRatio : wRatio);
                    img.width = (img.width / ratio);
                    img.height = (img.height / ratio);
                }
                else
                {
                    if (img.width > width)
                    {
                        img.width = (img.width / wRatio);
                        img.height = (img.height / wRatio);
                    }
                    else
                    {
                        if (img.height > height)
                        {
                            img.width = (img.width / hRatio);
                            img.height = (img.height / hRatio);
                        }
                    }
                }
            }


            function BeforeClick(sender, args)
            {

                var node = args.get_node();
                var object = document.createElement("IMG");
                object.src = node.get_value();
                if (node.get_attributes().getAttribute("Category") == "Folder")
                {
                    return;
                }

                var previewPane = document.getElementById("previewPane");

                if (object.complete)
                {
                    Scale(object, 100, 100);
                    previewPane.innerHTML = "";
                    previewPane.appendChild(object);
                }
                else
                {
                    previewPane.innerHTML = "Loading image...";
                    object.onload = function ()
                    {
                        Scale(object, 100, 100);
                        previewPane.innerHTML = "";
                        previewPane.appendChild(object);
                        object.onload = null;
                    }
                }
            }


            //]]>
        </script>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451