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

Clone dock item

5 Answers 154 Views

Dock

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

5 Answers, 1 is accepted

answered on 07 Apr 2008, 03:07 PM

I created for you an example, which illustrates how to highlight a RadDockZone when you hover it. If you drop the RadTreeNode in the zone it will postback to the server and a RadDock will be added.

ASPX:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragDrop.aspx.cs" Inherits="TreeView_DragDrop" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %> 
        
            <!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> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css">  
        
                    .HighlightedZoneClass  
        
                    {  
        
                        background-color:Green !important;  
        
                    }  
        
                </style> 
        
                <script type="text/javascript">  
        
                            var dockZoneId= '<%= RadDockZone1.ClientID %>';  
        
                            function isMouseOverZone(target)  
        
                            {  
        
                                parentNode = target;  
        
                                while (parentNode != null)  
        
                                {                      
        
                                    if (parentNode.id == dockZoneId)  
        
                                    {  
        
                                        return parentNode;  
        
                                    }  
        
                                    parentNodeparentNode = parentNode.parentNode;  
        
                                }  
        
                                return null;  
        
                            }  
        
                            function onNodeDragging(sender, args)  
        
                            {  
        
                                var target = args.get_htmlElement();      
        
                                if(!target) return;  
        
                                var zone = isMouseOverZone(target)  
        
                                if (zone)  
        
                                {  
        
                                    $find(dockZoneId).addCssClass("HighlightedZoneClass");  
        
                                }  
        
                                else  
        
                                {  
        
                                    $find(dockZoneId).removeCssClass("HighlightedZoneClass");  
        
                                }  
        
                            }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        
                <div> 
        
                <rad:RadTreeView ID="tree1" runat="server" EnableDragAndDrop="true"   
        
                OnClientNodeDragging="onNodeDragging" 
        
                OnNodeDrop = "tree1_HandleDrop" 
        
                > 
        
                    <Nodes> 
        
                        <rad:RadTreeNode Text="1"></rad:RadTreeNode> 
        
                        <rad:RadTreeNode Text="1"></rad:RadTreeNode> 
        
                        <rad:RadTreeNode Text="1"></rad:RadTreeNode> 
        
                        <rad:RadTreeNode Text="1"></rad:RadTreeNode> 
        
                        <rad:RadTreeNode Text="1"></rad:RadTreeNode> 
        
                    </Nodes> 
        
                </rad:RadTreeView> 
        
                <rad:RadDockLayout ID="RadDockLayout1" runat="server">  
        
                    <rad:RadDockZone ID="RadDockZone1" runat="server" Height="400px" Width="400px">  
        
                        <rad:RadDock ID="RadDock1" runat="server" Title="RadDock1" Height="200px">  
        
                        </rad:RadDock> 
        
                    </rad:RadDockZone> 
        
                </rad:RadDockLayout> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Codebehind:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            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;  
        
            public partial class TreeView_DragDrop : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void tree1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)  
        
                {  
        
                    if (e.HtmlElementID == RadDockZone1.ClientID)  
        
                    {  
        
                        RadDock rdo = new RadDock();  
        
                        rdo.Text = rdo.ID = System.DateTime.Now.ToString();  
        
                        RadDockZone1.Controls.Add(rdo);  
        
                    }  
        
                }  
        
            }