New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Drag-and-drop Images in RadEditor

  • Images

    • Marketing
      • Advertisements
      • Products
      • ad_color_picker.gif
      • ad_tables.gif
      • new_folders_sorting.gif
    • PublicRelations
    • Templates

  • Preview

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.TreeviewAndEditor.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <ul class="drag-widget">
                <li>
                    <div>
                        <h2>Images</h2>
                        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Height="250px" EnableDragAndDrop="True"
                            OnClientNodeDragStart="TelerikDemo.OnClientNodeDragStart" OnClientNodeDragging="TelerikDemo.OnClientNodeDragging"
                            OnClientNodeDropping="TelerikDemo.OnClientNodeDropping" OnClientNodeClicking="TelerikDemo.BeforeClick"
                            Width="300px" OnClientLoad="TelerikDemo.RadTreeView_OnClientLoad">
                        </telerik:RadTreeView>
                    </div>
                </li>
                <li>
                    <div>
                        <h2>Preview</h2>
                        <div id="previewPane"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" SkinID="BasicSetOfTools" Width="500"
                Height="500" ID="RadEditor1" runat="server" OnClientLoad="TelerikDemo.RadEditor_OnClientLoad" 
                EmptyMessage="<h4>You can drag an image from the tree view into this content area.</h4>">
            </telerik:RadEditor>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance