Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Drop Raddock from Radtreeview to RaddockZone

1 Answer 111 Views
Dock
This is a migrated thread and some comments may be shown as answers.
fahad
Top achievements
Rank 1
fahad asked on 02 Apr 2009, 08:48 AM

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();     
            previousZone= null;     
        }     
        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...

1 Answer, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 07 Apr 2009, 01:40 PM
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.
Tags
Dock
Asked by
fahad
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Share this question
or