Drop Raddock from Radtreeview to RaddockZone

2 posts, 0 answers
  1. fahad
    fahad avatar
    5 posts
    Member since:
    Jan 2009

    Posted 02 Apr 2009 Link to this post

    Dear all,

    I have an scenario where there is a radtreeview on left and raddockzone on right.

    user can drag node from treeview and drop it on raddockzone at particular place.

    i done some work and for vertical orientation it is working fine,  but i want horizontal layout and let user drop two docks on a row, but this i couldnt acheive.

    my aspx and code are below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DockAndTreeView.aspx.cs" Inherits="testRAD.DockAndTreeView" %> 
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>    
    <!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>    
        <script type="text/javascript">     
        var currentTreeView;     
        var previousZone;     
        var currentZone;     
        function onNodeDragging(sender, args)     
        {     
            currentTreeView = sender;     
            var target = args.get_htmlElement();     
                
            var zone = null;     
            var parentNode = target;     
            while (parentNode != null)     
            {     
                if(parentNode.id)     
                {     
                    if($find(parentNode.id))     
                    {     
                        if(Object.getTypeName($find(parentNode.id)) == "Telerik.Web.UI.RadDockZone")                     
                        {     
                            zone = $find(parentNode.id);     
                            break;     
                        }     
                    }      
                }     
                parentNodeparentNode = parentNode.parentNode;     
            }     
        
            if(previousZone != null)     
            {     
                previousZone._hidePlaceholder();     
                previousZonenull;     
            }     
            if(zone != null)     
            {     
                zone._showPlaceholder(args._node);     
                previousZone = zone;     
                currentZone = zone;     
            }          
        }  
        function onClientNodeDropping(sender, eventArgs)  
        {                 
            var command = {};  
            htmlElement = eventArgs.get_htmlElement();            
                                          
            if(eventArgs.destinationNode && (eventArgs.destinationNode.get_allowDrop() || sender._draggingPosition != "over") && eventArgs.destinationNode.get_isEnabled())  
            {             
                if(eventArgs.destinationNode._getControl() == this)  
                {                 
                    command.commandName = "NodeDrop";  
                }  
                else  
                {  
                    command.commandName = "NodeDropOnTree";          
                }  
            }             
            else if(htmlElement.id && htmlElement.id != "")  
            {  
                command.commandName = "NodeDropOnHtmlElement";  
            }   
            if(!command.commandName)  
            {         
                if (currentZone!=null)  
                {             
                    currentZone._hidePlaceholder();  
                }  
            }  
        }  
         
        function onNodeDropped(obj, args)     
        {     
            if (currentZone!=null)  
            {  
                $get("currentZoneTB").value = currentZone.get_id();     
                currentZone._hidePlaceholder();     
            }  
        }     
        </script>    
    </head>    
    <body>    
        <form id="form1" runat="server" style="overflow:scroll">     
            <asp:ScriptManager ID="ScriptManager1" runat="server">     
            </asp:ScriptManager>    
            <%--hidden inputs used to exchange data with server: Place holder position and currentZone--%>    
            <input type="text" id="currentPlaceholderPosition" runat="server" style="display:none"/>     
            <input type="text" id="currentZoneTB" runat="server" style="display:none" />    
                 
            <telerik:RadTreeView ID="RadTreeView1" runat="server"    
                         
                 EnableDragAndDrop="True"    
                 OnNodeDrop="RadTreeView1_HandleDrop"    
                 OnClientNodeDropping="onClientNodeDropping" 
                 OnClientNodeDropped="onNodeDropped"      
                 OnClientNodeDragging="onNodeDragging">    
                            <Nodes>    
                                <telerik:RadTreeNode Text="Node1" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node2" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node3" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node4" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node5" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node6" PostBack="true"></telerik:RadTreeNode>    
                                <telerik:RadTreeNode Text="Node7" PostBack="true"></telerik:RadTreeNode>    
                            </Nodes>    
                    </telerik:RadTreeView>    
                     
                <telerik:RadDockLayout runat="server" ID="RadDockLayout1"    
                 onsavedocklayout="RadDockLayout1_SaveDockLayout"    
                onloaddocklayout="RadDockLayout1_LoadDockLayout" >    
                    <telerik:RadDockZone runat="server" ID="RadDockZone1"      
                    Width="800px" MinHeight="300px" style="float:left" Orientation="Horizontal">     
                    </telerik:RadDockZone>                                     
                    <%--<telerik:RadDockZone runat="server" ID="RadDockZone2" Width="400px" MinHeight="300px">     
                               
                    </telerik:RadDockZone>       
                  --%> 
                         <div style="display:none">     
                            Hidden UpdatePanel, which is used to receive the new dock controls.      
                            We will move them with script to the desired initial dock zone.     
                            <asp:updatepanel runat="server" id="UpdatePanel1">     
                                <triggers>    
                                    <asp:asyncpostbacktrigger controlid="RadTreeView1" eventname="NodeDrop" />    
                                </triggers>    
                    </asp:updatepanel>    
                </div>    
                   
            </telerik:RadDockLayout>    
            <script type="text/javascript">     
           var isNodeDragged = false;     
           //parameter can be dock or treeNode     
           function Telerik.Web.UI.RadDockZone.prototype._showPlaceholder(obj, location)     
            {       
                if(Object.getTypeName(obj) == "Telerik.Web.UI.RadTreeNode")     
                {     
                    isNodeDragged = true;     
                    var node = obj;     
                    this._repositionPlaceholder(node.get_element(), location);     
                    var placeholderStyle = this._placeholder.style;     
                    placeholderStyle.height = "30px";     
                    placeholderStyle.width = "100%";     
                    placeholderStyle.display = "block";     
                    isNodeDragged = false;     
                }     
                else     
                {        
                    var dock = obj;     
                    this._repositionPlaceholder(dock.get_element(), location);     
                    var dockdockBounds = dock._getBoundsWithBorderAndMargin();     
                    var placeholderMargin = dock._getMarginBox(this._placeholder);     
                    var placeholderBorder = dock._getBorderBox(this._placeholder);     
                    var horizontal = this.get_isHorizontal();     
                    var placeholderStyle = this._placeholder.style;     
                    placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";     
                    placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";     
                    placeholderStyle.display = "block";     
                }     
            }    
               
        Telerik.Web.UI.RadDockZone.prototype._repositionPlaceholder = function(dock_element, location)//TEKI: Add location  
        {  
             //fix TreeNode drag     
            if(isNodeDragged == true)     
            {        
                location = new Sys.UI.Point(currentTreeView._mousePos.x, currentTreeView._mousePos.y);           
            }        
            //end fix     
     
            var nearestChild = this._findItemAt(location, dock_element);  
     
            var zone_element = this.get_element();  
     
            if (null == nearestChild)  
            {  
                //Bug fix: ID 9516  
                // _clearElement must be after all docks and _placeholder  
                zone_element.insertBefore(this._placeholder, this._clearElement);  
            }  
            else  
            {  
                if(nearestChild.previousSibling != this._placeholder)  
                {  
                    zone_element.insertBefore(this._placeholder, nearestChild);  
                }  
            }  
            //GET placeholder position     
            for(var i = 0;i < zone_element.childNodes.length; i++)     
            {     
                if(zone_element.childNodes[i] == this._placeholder)     
                {     
                    var currentPos = i;  
                    document.title = currentPos - 2;     
                    $get('currentPlaceholderPosition').value = currentPos - 2;        
                }     
            }     
            //end Get   
        }           
            
            </script>    
        </form>    
    </body>    
    </html>    
        
     
    using System;  
    using System.Collections;  
    using System.Configuration;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Xml.Linq;  
    using Telerik.Web.UI;  
    using System.Collections.Generic;  
     
    namespace testRAD  
    {  
        public partial class DockAndTreeView : System.Web.UI.Page  
        {  
            private List<DockState> CurrentDockStates  
            {  
                get 
                {  
                    //Store the info about the added docks in the session. For real life     
                    // applications we recommend using database or other storage medium      
                    // for persisting this information.     
                    List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];  
                    if (Object.Equals(_currentDockStates, null))  
                    {  
                        _currentDockStates = new List<DockState>();  
                        Session["CurrentDockStatesMyPortal"] = _currentDockStates;  
                    }  
                    return _currentDockStates;  
                }  
                set 
                {  
                    Session["CurrentDockStatesMyPortal"] = value;  
                }  
            }  
     
            protected void Page_Load(object sender, EventArgs e)  
            {  
     
            }  
     
     
            protected void Page_Init(object sender, EventArgs e)  
            {  
                //Recreate the docks in order to ensure their proper operation     
                for (int i = 0; i < CurrentDockStates.Count; i++)  
                {  
                    if (CurrentDockStates[i].Closed == false)  
                    {  
                        RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);  
                        //We will just add the RadDock control to the RadDockLayout.     
                        // You could use any other control for that purpose, just ensure     
                        // that it is inside the RadDockLayout control.     
                        // The RadDockLayout control will automatically move the RadDock     
                        // controls to their corresponding zone in the LoadDockLayout     
                        // event (see below).     
                        RadDockLayout1.Controls.Add(dock);  
                        //We want to save the dock state every time a dock is moved.     
                        CreateSaveStateTrigger(dock);  
     
                    }  
                }  
            }  
     
            protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)  
            {  
                //Populate the event args with the state information. The RadDockLayout control     
                // will automatically move the docks according that information.     
                foreach (DockState state in CurrentDockStates)  
                {  
                    e.Positions[state.UniqueName] = state.DockZoneID;  
                    e.Indices[state.UniqueName] = state.Index;  
                }  
            }  
     
            protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)  
            {  
                //Save the dock state in the session. This will enable us      
                // to recreate the dock in the next Page_Init.      
                CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();  
            }  
     
            private RadDock CreateRadDockFromState(DockState state)  
            {  
                RadDock dock = new RadDock();  
                dock.ID = string.Format("RadDock{0}", state.UniqueName);  
                dock.ApplyState(state);  
                dock.Command += new DockCommandEventHandler(dock_Command);  
                dock.Commands.Add(new DockCloseCommand());  
                dock.Commands.Add(new DockExpandCollapseCommand());  
                  
     
                return dock;  
            }  
     
     
            void dock_Command(object sender, DockCommandEventArgs e)  
            {  
                if (e.Command.Name == "Close")  
                {  
                    ScriptManager.RegisterStartupScript(  
                    UpdatePanel1,  
                    this.GetType(),  
                    "RemoveDock",  
                    string.Format(@"function _removeDock() {{  
        Sys.Application.remove_load(_removeDock);  
        $find('{0}').undock();  
        $get('{1}').appendChild($get('{0}'));  
        $find('{0}').doPostBack('DockPositionChanged');  
    }};  
    Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),  
                    true);  
     
                }  
            }  
     
            private void CreateSaveStateTrigger(RadDock dock)  
            {  
                //Ensure that the RadDock control will initiate postback     
                // when its position changes on the client or any of the commands is clicked.     
                //Using the trigger we will "ajaxify" that postback.     
                dock.AutoPostBack = true;  
                dock.CommandsAutoPostBack = true;  
     
                AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "DockPositionChanged";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
     
                saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "Command";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
            }  
     
     
            protected void ButtonAddDock_Click(object sender, EventArgs e)  
            {  
     
            }  
     
            protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)  
            {  
                if (!string.IsNullOrEmpty(e.HtmlElementID))  
                {  
                    RadTreeNode sourceNode = e.SourceDragNode;  
                    int currentPos = int.Parse(currentPlaceholderPosition.Value);  
     
     
                    int docksCount = CurrentDockStates.Count;  
     
                    RadDock dock = new RadDock();  
                    dock.UniqueName = Guid.NewGuid().ToString();  
                    dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
                    dock.Title = "Dock" + docksCount.ToString();  
                    dock.Text = sourceNode.Text;  
                    dock.Width = Unit.Pixel(300);  
                    dock.DockMode = DockMode.Docked;  
                    dock.Commands.Add(new DockCloseCommand());  
                    dock.Commands.Add(new DockExpandCollapseCommand());  
                    dock.Command += new DockCommandEventHandler(dock_Command);  
     
                    UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
     
     
                    ScriptManager.RegisterStartupScript(  
                    dock,  
                    this.GetType(),  
                    "AddDock",  
                    string.Format(@"function _addDock() {{  
        Sys.Application.remove_load(_addDock);  
        $find('{1}').dock($find('{0}'),{2});   
        $find('{0}').doPostBack('DockPositionChanged');  
     
    }};  
    Sys.Application.add_load(_addDock);", dock.ClientID, currentZoneTB.Value, currentPos),  
                    true);  
     
                    CreateSaveStateTrigger(dock);  
                }  
            }     
        }  
    }  
     


    Kindly help me acheive this scenario...
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 07 Apr 2009 Link to this post

    You should change a part from the Telerik.Web.UI.RadDockZone.prototype_repositionPlaceHolder method:
      //GET placeholder position        
            for(var i = 0;i < zone_element.childNodes.length; i++)        
            {        
                if(zone_element.childNodes[i] == this._placeholder)        
                {        
                    var currentPos = i;     
                    document.title = currentPos - 2;        
                    $get('currentPlaceholderPosition').value = currentPos - 2;           
                }        
            }        
            //end Get    
     
    Should be changed to:
     //GET placeholder position        
            for(var i = 0;i < zone_element.childNodes.length; i++)        
            {        
                if(zone_element.childNodes[i] == this._placeholder)        
                {        
                    var currentPos = i;     
                    document.title = currentPos;        
                    $get('currentPlaceholderPosition').value = currentPos;           
                }        
            }        
            //end Get   

    Also you could set a width to the placeholder which is showed when you drag a node over a RadDockZone.
    In  _showPlaceholder method:
    instead placeholderStyle.width = "100%"  you should use  placeholderStyle.width = "300px";


    Hope this helps.
Back to Top