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

[Solved] Drag and Drop Designator

2 Answers 226 Views

TreeView

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

2 Answers, 1 is accepted

answered on 26 Jan 2008, 01:30 AM

Hi Alfred,

I must tell you that I'm not familiar with telerik's Treeview, and I'm not sure if this can be done in an easier way, but I can share some entry point with you.

On the NodeBound event , set some custom attributes for each node, for example Draggable="true" or Draggable="false".

Then you can use the following snippets to cancel the Drag event.

The treeview itself and the Javascript function to handle the start drag event:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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">  
        
                <title>Telerik Sample</title> 
        
                <script language="javascript" type="text/javascript">  
        
                function OnClientNodeDragStartHandler(sender, eventArgs)  
        
                {  
        
                var node = eventArgs.get_node();  
        
                var draggable = node.get_attributes().getAttribute("Draggable");  
        
                if  (draggable == 'false')  
        
                    {     
        
                        eventArgs.set_cancel(true);  
        
                    }  
        
                }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <div> 
        
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeDragStart="OnClientNodeDragStartHandler" 
        
                            LoadingStatusPosition="BeforeNodeText"   
        
                            OnNodeDrop="HandleDrop" 
        
                            Height="100%" EnableDragAndDropBetweenNodes="True" EnableDragAndDrop="True">  
        
                            <CollapseAnimation Duration="100" Type="OutQuint" /> 
        
                            <ExpandAnimation Duration="100" Type="OutQuart" /> 
        
                            <DataBindings> 
        
                                <telerik:RadTreeNodeBinding TextField="Text" /> 
        
                            </DataBindings> 
        
                        </telerik:RadTreeView> 
        
                        &nbsp;  
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

And the code behind:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            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 _Default : System.Web.UI.Page   
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    if (!Page.IsPostBack)  
        
                    {  
        
                        RadTreeView1.LoadContentFile("TreeView.xml");  
        
                    }  
        
                }  
        
                protected void HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)  
        
                {  
        
                    RadTreeNode sourceNode = e.SourceDragNode;  
        
                    RadTreeNode destNode = e.DestDragNode;  
        
                    RadTreeViewDropPosition dropPosition = e.DropPosition;  
        
                    if (destNode != null)  
        
                    {  
        
                        if (sourceNode.TreeView.SelectedNodes.Count <= 1)  
        
                        {  
        
                            PerformDragAndDrop(dropPosition, sourceNode, destNode);  
        
                        }  
        
                        else if (sourceNode.TreeView.SelectedNodes.Count > 1)  
        
                        {  
        
                            foreach (RadTreeNode node in sourceNode.TreeView.SelectedNodes)  
        
                            {  
        
                                PerformDragAndDrop(dropPosition, node, destNode);  
        
                            }  
        
                        }  
        
                        destNode.Expanded = true;  
        
                        sourceNode.TreeView.ClearSelectedNodes();  
        
                    }  
        
                }  
        
                private static void PerformDragAndDrop(RadTreeViewDropPosition dropPosition, RadTreeNode sourceNode, RadTreeNode destNode)  
        
                {  
        
                    switch (dropPosition)  
        
                    {  
        
                        case RadTreeViewDropPosition.Over:  
        
                            // child  
        
                            if (!sourceNode.IsAncestorOf(destNode))  
        
                            {  
        
                                sourceNode.Owner.Nodes.Remove(sourceNode);  
        
                                destNode.Nodes.Add(sourceNode);  
        
                            }  
        
                            break;  
        
                        case RadTreeViewDropPosition.Above:  
        
                            // sibling - above  
        
                            sourceNode.Owner.Nodes.Remove(sourceNode);  
        
                            destNode.InsertBefore(sourceNode);  
        
                            break;  
        
                        case RadTreeViewDropPosition.Below:  
        
                            // sibling - below  
        
                            sourceNode.Owner.Nodes.Remove(sourceNode);  
        
                            destNode.InsertAfter(sourceNode);  
        
                            break;  
        
                    }  
        
                }  
        
            }

And the sample xml: (just the "Music" node will be moveable) Don't forget to set this attribute for every other node :)

.

            <?xml version="1.0" encoding="utf-8" ?> 
        
            <Tree> 
        
                <Node Text="Books" Expanded="True" Draggable="false">  
        
                    <Node Text="Arts" /> 
        
                    <Node Text="Biographies" /> 
        
                    <Node Text="Children's Books" /> 
        
                    <Node Text="Computers &amp; Internet" /> 
        
                    <Node Text="Cooking" /> 
        
                    <Node Text="History" /> 
        
                    <Node Text="Fiction" /> 
        
                    <Node Text="Mystery" /> 
        
                    <Node Text="Nonfiction" /> 
        
                    <Node Text="Romance" /> 
        
                    <Node Text="Science Fiction " /> 
        
                    <Node Text="Travel" /> 
        
                </Node> 
        
                <Node Text="Music" Expanded="True" Draggable="true">  
        
                    <Node Text="Alternative" /> 
        
                    <Node Text="Blues" /> 
        
                    <Node Text="Children's Music" /> 
        
                    <Node Text="Classical" /> 
        
                    <Node Text="Country" /> 
        
                    <Node Text="Dance" /> 
        
                    <Node Text="Folk " /> 
        
                    <Node Text="Hard Rock" /> 
        
                    <Node Text="Jazz" /> 
        
                    <Node Text="R&amp;B" /> 
        
                    <Node Text="Soundtracks" /> 
        
                </Node>   
        
                <Node Text="Software" Expanded="True" Draggable="false">  
        
                    <Node Text="Business &amp; Office" /> 
        
                    <Node Text="Database" /> 
        
                    <Node Text="Networking" /> 
        
                    <Node Text="Presentation" /> 
        
                    <Node Text="Project Management" /> 
        
                    <Node Text="Reports" /> 
        
                    <Node Text="Spreadsheet" /> 
        
                    <Node Text="Word Processing" /> 
        
                </Node> 
        
            </Tree>

Hope it helps!

Fernandes