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

Create dropzone from dragged treeview node

37 Answers 599 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 29 May 2008, 07:09 PM
Hi,
I'm trying to figure out how to create something like the way you can add controls to pages in Sitefinity, by dragging a treeview node to DropZones.
I know how to just drag and drop a node to a DropZone and then create a RadDock in the controller that has the same ID as the "e.HtmlElementID".

But doing it this way doesn't work very well because I'm not dragging a RadDock so I can't choose where in the zone to put it because there is no interaction between the dragged node and the DropZone, like there is between a dragged RadDock and the DropZone.

Has anyone tried this and can point me in the right direction?

Edit: Should be RadDock in the title for this thread, not DropZone...

37 Answers, 1 is accepted

Sort by
0
Sophy
Telerik team
answered on 30 May 2008, 01:25 PM
Hi Jay,

Could you please describe in more details your exact scenario and the result you want to achieve? When do you create the RadDock object and what you expect to happen when you drop the treeview node? Having more information about your scenario we will be able to think of a possible solution to the issue.

Best regards,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Jay
Top achievements
Rank 1
answered on 30 May 2008, 07:32 PM
Hi thanks for your reply,
Basically what happens in sitefinitys edit mode. I want to be able to drag a node and make it interact with the dropzones as if the node were a dragged RadDock.

At the moment I have the option for the user to:
1. select a control in a dropdownlist
2. select the RadDockZone where the control should be added from a dropdownlist
3. Press the button and the control (RadDock with the controller inside) gets created and assigned to the selected RadDockZone.

The user can then move the RadDocks as he/she wishes and save the layout.

I would just want to also offer the ability to list the controls in a RadTreeView and let the user select a control, drag it over a RadDockZone to add the control. But if you just drag a regular RadTreeNode the DropZone obviously don't highlight and let you position the control/node between existing RadDocks in the zone, and that's my problem that I would like to solve.

I've tried to add a RadDock as a control to a TreeNode and thought that it might act is if I were dragging the RadDock and not the node, but that didn't work.

Is it possible to activate the RadDockZone with client side code so that it "activates" when a TreeNode hovers it?

Thanks for taking you time
0
Accepted
Sophy
Telerik team
answered on 02 Jun 2008, 02:03 PM
Instructions.GIF
DragAndDropNodes.zip
Hi Jay,

I prepared a sample page demonstrating how you can use RadDocks as TreeView nodes and drag and drop them to a given zone. Please, find the example attached and let me know whether it answers your requirements. You can feel free to modify and style the sample page according to your scenario.
In case the enclosed example cannot help you achieve the desired result, send us a simple running application which demonstrates your scenario so that we can take a closer look at it. You will need to open a support ticket in order to have the right to attach files. Please, download a trial version of the RadControls for ASP.NET AJAX suite and you will have the right to open a support ticket. For your convenience I have attached a screenshot with instructions how to open a support ticket.

Best regards,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Denny
Top achievements
Rank 2
answered on 06 Jun 2008, 12:50 PM
Hi, I'm in exactly same situation, is it possible that instead of 'MOVE' but 'COPY' the dock object from tree node into the zone area?
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 10 Jun 2008, 01:08 PM
You should create another RadDock via AJAX on the server, when the RadDock is dropped into the zone.
For this goal you should set RadDock property AutoPostback to True and handle RadDock server side event OnDockPositionChanged. In the handler you should dynamically create the same RadDock as the docked one.
0
horsted
Top achievements
Rank 1
answered on 12 Jun 2008, 10:36 PM
Hi, Obi-Wan Kenobi,

You wouldn't ahppen to have any code, that does what you describe, that you are willing to share?

I would be very interested - thanks in advance!

/Horsted
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 25 Jun 2008, 11:45 AM
I didn't have a code, which illustrates my words. I changed a lot the MyPortal example to achieve the desired goals.
The example below demonstrates how to add dynamically RadDocks to a treeview. Once you drop a RadDock(TreeNode) from a treeView to a DropZone the dock is COPIED via AJAX.
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<%@ 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 runat="server">  
    <title>Untitled Page</title> 
    <style type="text/css">  
    .rtIn  
    {  
        vertical-align: baseline !important;  
        display: block !important;  
    }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
     <asp:scriptmanager id="ScriptManager" runat="server" /> 
        <div> 
             
            <br/>Select Docking Zone:  
            <asp:dropdownlist id="DropDownZone" runat="server" datasource="<%#GetZones() %>" 
                datatextfield="ID" datavaluefield="ClientID" width="150">  
            </asp:dropdownlist> 
            <asp:button runat="server" CssClass="button" id="ButtonAddDock" text="Add Dock" onclick="ButtonAddDock_Click" /> 
        </div> 
        <br/> 
           
        <telerik:raddocklayout runat="server" id="RadDockLayout1"   
            onsavedocklayout="RadDockLayout1_SaveDockLayout" 
            onloaddocklayout="RadDockLayout1_LoadDockLayout">  
        <div style="width:400px;background-color:Red;float:left">  
            <telerik:RadTreeView ID="RadTreeView1" runat="server">  
                <nodes> 
                     <telerik:RadTreeNode text="Dock1">  
                        <NodeTemplate> 
                             <telerik:raddockzone id="TreeZone1" runat="server">  
                               
                             </telerik:raddockzone> 
                        </NodeTemplate>                                 
                    </telerik:RadTreeNode> 
                    <telerik:RadTreeNode text="Dock2">  
                     <NodeTemplate> 
                             <telerik:raddockzone id="TreeZone2" runat="server">  
                               
                             </telerik:raddockzone> 
                        </NodeTemplate> 
                    </telerik:RadTreeNode> 
                        <telerik:RadTreeNode text="Dock3">   
                         <NodeTemplate> 
                             <telerik:raddockzone id="TreeZone3" runat="server">  
                               
                             </telerik:raddockzone> 
                        </NodeTemplate> 
                    </telerik:RadTreeNode> 
                </nodes> 
            </telerik:RadTreeView> 
            </div> 
            <div style="width:300px;background-color:Aqua">  
            <asp:Label ID="Label1" runat="server" Text="Drop the dock here:"></asp:Label> 
                  <telerik:raddockzone id="DropZone" runat="server">  
                               
                </telerik:raddockzone> 
            </div> 
            <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="ButtonAddDock" eventname="Click" /> 
                    </triggers> 
                </asp:updatepanel> 
            </div> 
        </telerik:raddocklayout> 
    </form> 
</body> 
</html> 
 
CODE Behind:
using System;  
using System.Collections;  
using System.Collections.Generic;  
using System.ComponentModel;  
using System.Data;  
using System.Drawing;  
using System.Web;  
using System.Web.SessionState;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.HtmlControls;  
using Telerik.Web.UI;  
 
public partial class Default2 : 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)  
        {  
            if (!IsPostBack)  
            {  
                DropDownZone.DataBind();  
            }  
        }  
 
        public ArrayList GetZones()  
        {  
            ArrayList zones = new ArrayList();  
            zones.Add(RadTreeView1.Nodes[0].FindControl("TreeZone1"));  
            zones.Add(RadTreeView1.Nodes[1].FindControl("TreeZone2"));  
            zones.Add(RadTreeView1.Nodes[2].FindControl("TreeZone3"));  
 
            return zones;  
        }  
 
        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.DockPositionChanged += new DockPositionChangedEventHandler(dock_DockPositionChanged);  
            dock.Command += new DockCommandEventHandler(dock_Command);  
            dock.Commands.Add(new DockCloseCommand());  
            dock.Commands.Add(new DockExpandCollapseCommand());  
 
            return dock;  
        }  
 
        void dock_DockPositionChanged(object sender, DockPositionChangedEventArgs e)  
        {  
            RadDock currentDock = (RadDock)sender;  
            //Dock should come from TreeViewZones otherwise it will not have a duplicate   
            if (e.DockZoneID == DropZone.ClientID && currentDock.DockZoneID != DropZone.ClientID && currentDock.DockZoneID != "")  
            {  
                int docksCount = CurrentDockStates.Count;  
                //Create a copy of the dropped Dock  
                RadDock dock = new RadDock();  
                dock.UniqueName = Guid.NewGuid().ToString();  
                dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
                dock.Title ="COPY OF:"+ currentDock.Title;  
                dock.Text = currentDock.Text;  
                dock.Width = Unit.Pixel(300);  
 
                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}'));
    $find('{0}').doPostBack('DockPositionChanged');
}};
Sys.Application.add_load(_addDock);", dock.ClientID, DropZone.ClientID),  
                true);  
 
                //Right now the RadDock control is not docked. When we try to save its state  
                // later, the DockZoneID will be empty. To workaround this problem we will   
                // set the AutoPostBack property of the RadDock control to true and will   
                // attach an AsyncPostBackTrigger for the DockPositionChanged client-side  
                // event. This will initiate second AJAX request in order to save the state  
                // AFTER the dock was docked in RadDockZone1.  
                CreateSaveStateTrigger(dock);  
            }  
        }  
 
        private RadDock CreateRadDock()  
        {  
            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 = string.Format("Added at {0}", DateTime.Now);  
            dock.Width = Unit.Pixel(300);  
 
            dock.Commands.Add(new DockCloseCommand());  
            dock.Commands.Add(new DockExpandCollapseCommand());  
            dock.Command += new DockCommandEventHandler(dock_Command);  
 
            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)  
        {  
            RadDock dock = CreateRadDock();  
             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}'));
    $find('{0}').doPostBack('DockPositionChanged');
}};
Sys.Application.add_load(_addDock);", dock.ClientID, DropDownZone.SelectedValue),  
            true);  
 
            CreateSaveStateTrigger(dock);  
              
            
        }  
    }  
 
 
 
Good luck!
0
Nick
Top achievements
Rank 1
answered on 27 Jun 2008, 02:21 PM
Hi All,

I have the same requirement, to be able to add items into a DockZone-type area by dragging items from a tree view (or even better a PanelBar but we won't go there)

I have run Obi-Wan Kenobi's demo code but the item that is dragged stays in the destination zone as well as a copy being created, not really what I was after.

What I, and I guess the original poster, am after is the same functionality as the Sitefinity page edit mode, where you can drag a "control" item from the tree-view in the sidebar into an area on the page which acts similarly to a DockZone in that it allows you to place the new item either above, below or between existing items.  Dropping the tree-view item then causes a postback allowing the page to draw in a new item of the correct type into the page.

Can you tell us which controls are being used to do this, or even provide a simplistic example?

Many thanks in advance.

Nick
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 04 Jul 2008, 11:53 AM
I got your point!
I looked at the dock implementation in SiteFinity and it seems that this is not a RadDock for asp.net ajax. However I think that I'll be able to achieve such a functionality with RadDock, but I should override some RadDockZone client methods. I'll try it soon -when I have a time for fun:) -  and I'll post the solution.
Wish me luck!:)
0
horsted
Top achievements
Rank 1
answered on 04 Jul 2008, 12:04 PM
Hi Obi-Wan Kenobi,

Just want to let you know, that it's very kind of you to help out - really appriciate it... 

And the best of luck to you :-)

Thanks, horsted
0
Nick
Top achievements
Rank 1
answered on 04 Jul 2008, 12:05 PM
Ooh, good luck!  :D 

I had a nose through the Sitefinity product and came to the same conclusion....it's not a standard RadControl that they have used for this.  Unfortunately I have very little knowledge of the Telerik controls and so had to put this to one side while I develop the rest of the application.

Any help you can give will be most appreciated.

Cheers,
Nick
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 09 Jul 2008, 03:03 PM
Finally I'm done!!!!:)
When RadTreeNode is dropped over the zone,a new dock is created via AJAX.
ASPX:
 
<%@ 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;  
                                }  
                            }   
                        }  
                        parentNode = parentNode.parentNode;  
                    }  
                    if(previousZone != null)  
                    {  
                        previousZone._hidePlaceholder();  
                        previousZone= null;  
                    }  
                    if(zone != null)  
                    {  
                            target.style.cursor = "hand";  
                            zone._showPlaceholder(args._node);  
                            previousZone = zone;  
                            currentZone = zone;  
                    }  
                    else  
                    {    
                        try  
                        {  
                            zone._hidePlaceholder();  
                        }   
                        catch(e)  
                        {  
                          
                        }  
                    }   
                }  
        function onNodeDropped(obj,args)  
        {  
            $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" 
             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="400px" MinHeight="300px" style="float:left">  
                </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)  
        {    
            if(Object.getTypeName(obj) =="Telerik.Web.UI.RadTreeNode")  
            {  
                isNodeDragged = true;  
                var node = obj;  
                this._repositionPlaceholder(node.get_element());  
                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());  
                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";  
            }  
        }  
      function Telerik.Web.UI.RadDockZone.prototype._repositionPlaceholder(dock_element)        
      {   
        var ddm = Telerik.Web.DragDropManager._getInstance();  
        var scrollOffset = ddm.getScrollOffset(dock_element, /* recursive */ true);  
        var location;  
        //fix TreeNode drag  
        if(isNodeDragged == true)  
        {     
            location = new Sys.UI.Point(currentTreeView._mousePos.x, currentTreeView._mousePos.y);        
        }  
        else  
        {  
            location = new Sys.UI.Point(window._event.clientX, window._event.clientY);  
        }  
        //end fix  
        location = ddm.addPoints(location, scrollOffset);  
        var nearestChild = this._findItemAt(location, dock_element);  
        var zone_element = this.get_element();  
        if (null == nearestChild)  
        {  
            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;  
                $get('currentPlaceholderPosition').value =currentPos-2;     
            }  
        }  
        //end Get  
    }  
        </script> 
    </form> 
</body> 
</html> 
 
CodeBehind:
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)  
    {  
          
    }  
 
    //public ArrayList GetZones()  
    //{  
    //    ArrayList zones = new ArrayList();  
    //    zones.Add(RadDockZone1);  
    //    //zones.Add(RadDockZone2);  
 
    //    return zones;  
    //}  
 
    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)  
    {  
        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.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);  
    }  
 


0
Happy
Top achievements
Rank 1
answered on 27 Aug 2008, 09:04 PM
Thanks! I'm trying to make this work but as soon as I start dragging I'm getting an error in the javascript that Telerik.Web.DragDropManager is undefined. What is this? I can't find it in any documentation.

I wish Telerik would provide a sample app that tries to duplicate SiteFinity like editting.
0
Sophy
Telerik team
answered on 28 Aug 2008, 08:15 AM
DockAndTreeView.zip
Hi Happy,

The error you experience is due to a modification in the drag/drop functionality of the RadDock for ASP.NET AJAX in the latest updates of the control. The previous versions of the RadDock control used the drag and drop functionality which is provided by the ASP.Net Ajax framework  but in the latest version of the control the drag/drop functionality has been replaced by our own improved implementation which also addresses some previously existing problems.

In the provided example some of the methods of the RadDock control which concern its dragging behavior are overridden and therefore using the latest Telerik.Web.UI dll these methods throw the error you observe. Please, find attached a modified version of this example which works with the latest update of the control. However, note that the example does not demonstrate an intended behavior of the RadDock control and that is why it is not an official example as it is possible to lead to some side effects.

Please, describe in more details what kind of an example similar to that in Sitefinity you are requesting for. We need more information about the exact scenario you want to achieve in order to help you.

Kind regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Happy
Top achievements
Rank 1
answered on 28 Aug 2008, 08:30 PM
Thanks! Works great! Almost.... I can drag new nodes onto my layout and even rearrange any preexisting nodes. But every so often, any newly dropped nodes all of a sudden disappear, like some background timer or something cleared them out. What am I missing?

What do you mean by "not intended behaviour"? What part is not intended? Don't you want users to be able to add new zones to a page? All your samples involve clicking a button, then looking for where it appeared, and then dragging it. This sample is so much nicer. I did see the other post where there were actual docks in the tree itself that could be dragged but that was not very nice and wasted a lot of space. It would be nice if you found a way to be able to say that this sample is a supported usage. This is one aspect of SiteFinity that I was trying to duplicate and it seems mostly solved (although unsupported?). I've read other posts from users wanting SiteFinity like behaviour.

It looks like they allow one to just upload a master page (css layout) and then manipulate it through the web. I've built my own processer to take my master pages (css or tables or whatever) and I can rebuild the page for editting by injecting RadDock's where necessary. This mostly works but the RadDocks don't seem to properly constrain themselves to the areas (div, td, etc) that they are in. Minor issue.

The other remaining functionality that I like in SiteFinity is it's really nice the way the page mostly looks the way it's suppose to. There are no big extra headers or controls on the various zones that are all visible at the same time.  They do highlight the actual drop zones so that users can see which areas are editable. But when one hovers over an editable item, then the content of that zone fades out some and the zone interface becomes visible ontop. Then the user can drag or click edit to manipulate that zone.

Can I do this with RadDock? Have the RadDock's main content visible without anything else not even any borders (I believe you support this) but then the standard RadDock interface becomes visible when I hover over it. Then I could grab it to drag or click one of my custom buttons to edit that zone.

Thanks!
0
Sophy
Telerik team
answered on 29 Aug 2008, 01:12 PM
screenshot.png
DockExample.zip
Hi,

I am not sure what exactly you mean under "newly dropped nodes all of a sudden disappear". We are not able to reproduce such a behavior. Could you please send us some screenshots or a video which demonstrates how this behavior could be reproduced. You will need to open a support ticket in order to have the right to attach files. You could also send us a list of steps we need to follow to reproduce the problem. The only thing which comes into my mind is the case in which no dock is created when you drop the TreeView node to an inappropriate place - over another RadDock for example. For your convenience I have attached a screenshot which demonstrates this case.

Under "not an intended behavior" I meant that the RadDock is not designed to support such a behavior. That is why, we cannot guarantee that it will work as expected in all possible scenarios. You see that some of the RadDock's methods are overridden in the provided example and therefore it is possible that this causes some side effects in specific cases. Nevertheless, if the example answers the requirements of your scenario you can feel free to use it accordingly.

It is possible to achieve a similar functionality to the one in Sitefinity you describe using RadDock for ASP.NET AJAX but you will need to play with the RadDock's DockHandle and its css styles. You can use the Set Drag Handle online example for reference. I have attached an example which provides general idea how to achieve the desired functionality.

If you have any other questions, do contact us again.

All the best,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Happy
Top achievements
Rank 1
answered on 29 Aug 2008, 09:29 PM
I've submitted a ticket that demonstrates the disappearing nodes. Thanks for the sample!!! I've been playing around with it and I've mostly got it working now. I switched it from using the custom dock handle div you had to using the built in handle with the title and commands. I just hide that immediately at startup. There is quite a bit of flickering while dragging it. Any way to get the default handle to not show initially? If I turn it off in the properties, then the get_handle returns null.

I was trying to get the original dock contents to be faded out instead of completely off while hovering but filter alpha opaque doesn't seem to work right within the dock. Doesn't seem to have any effect.

This is what I've got so far:

<%@ page language="C#" autoeventwireup="true"  %> 
 
<%@ register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
<!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 id="Head1" runat="server">  
    <title>Untitled Page</title> 
    <style type="text/css">  
    .dockHoverStyle  
    {  
        background-color: gray !important;  
    }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:scriptmanager id="manager1" runat="server">  
    </asp:scriptmanager> 
 
    <script type="text/javascript">  
        function SetHandleDock(dock, args) {  
            var defaultHandle = dock.get_handle();  
            defaultHandle.style.display = "none";  
            //  
            var dockContent = document.getElementById("Content_" + dock.get_id());  
            //  
            $addHandler(dock.get_element(),"mouseover", onMouseOverHandler);  
            $addHandler(dock.get_element(),"mouseout", onMouseOutHandler);  
        }  
        function onMouseOverHandler()  
        {     
            var dock = $find(this.id);  
            this.className += "dockHoverStyle";  
 
            var defaultHandle = dock.get_handle();  
            defaultHandle.style.display = "block";  
 
            var dockProperties = document.getElementById("Properties_" + dock.get_id());  
            var dockContent = document.getElementById("Content_" + dock.get_id());  
            if (dockProperties != null) {  
                dockContent.style.display = "none";  
                dockProperties.style.display = "block";  
            }  
 
              
        }  
        function onMouseOutHandler()  
        {  
            var dock = $find(this.id);  
 
            var defaultHandle = dock.get_handle();  
            defaultHandle.style.display = "none";  
 
            var dockProperties = document.getElementById("Properties_" + dock.get_id());  
            var dockContent = document.getElementById("Content_" + dock.get_id());  
            if (dockProperties != null) {  
                dockContent.style.display = "block";  
                dockProperties.style.display = "none";  
            }  
             
            var cssClasses = this.className.split(' ');  
            this.className = "";  
            for(var i = 0; i < cssClasses.length - 1; i++)  
            {  
                this.className += cssClasses[i] + ' ';  
            }  
            document.title = this.className;  
        }  
    </script> 
 
    <telerik:raddocklayout id="layout1" runat="server">  
        <table> 
            <tr> 
                <td> 
                    <telerik:RadDockZone id="zone1" runat="server" width="300px" Height="400px">  
                        <telerik:RadDock id="dock1" runat="server" onclientinitialize="SetHandleDock" height="150px" Title="Custom Control">  
                            <contenttemplate>      
                                <div id="Properties_dock1" style="display:none; filter:alpha(opacity=10);    " > 
                                    Instead of showing content let's show some settings for this control:<br /><br /> 
                                    Setting1=1<br /> 
                                    Setting2=2<br /> 
                                    Setting2=2<br /> 
                                </div> 
                                <div id="Content_dock1">  
                                    <b>Custom Control</b><br /> 
                                    Sample custom control output html or maybe even the actual output that reflects the settings above  
                                </div> 
                            </contenttemplate> 
                        </telerik:RadDock> 
                        <telerik:RadDock id="dock2" runat="server" onclientinitialize="SetHandleDock" height="100px" Title="Generic Content">    
                        <contenttemplate> 
                                <div id="Content_dock2" > 
                                    <b>Generic Content</b><br /> 
                                    <br /> 
                                    dggju dfsyh rt et j yk r earg y tyj erg qer grt hyt tu r tgqer ger t hrt gqer ge r th rg qerg erg rtj yt rt hrt ve g  
                                </div> 
                        </contenttemplate>   
                        </telerik:RadDock> 
                    </telerik:RadDockZone> 
                </td> 
                <td> 
                    <telerik:RadDockZone id="RadDockZone1" runat="server" width="300px" Height="400px">  
                    </telerik:RadDockZone> 
                </td> 
                <td> 
                    <telerik:RadDockZone id="RadDockZone2" runat="server" width="300px" Height="400px">  
                    </telerik:RadDockZone> 
                </td> 
            </tr> 
        </table> 
    </telerik:raddocklayout> 
    </form> 
</body> 
</html> 
 
0
Sophy
Telerik team
answered on 02 Sep 2008, 02:28 PM
Example.zip
Hi,

I have attached a modified version of the code you have sent us which demonstrates how to add some transparency to the style applied to the RadDock control and how to avoid the quick initial appearance of the dock handle using a trick. The titlebar initially appears because the RadDock control is rendered server-side and you make the titlebar invisible at a later stage. The flickering problem you mention appears when dragging the RadDock very quickly but unfortunately it could not be resolved. I could not understand completely what you meant under  "dock contents to be faded out instead of completely off". In case the attached page cannot help you achieve the desired behavior, please, describe in more details what is the exact result you expect so that we can get a better idea of the problem. It would be best if you could also send us some screenshots which demonstrate what you want to achieve.

Best wishes,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Happy
Top achievements
Rank 1
answered on 08 Sep 2008, 07:56 PM
Thanks, I looked it over but that's not what I was after. That effect is causing the ENTIRE dock to ALWAYS be faded out.

In my sample, I have two divs within the dock area. The grab handle is not visible unless I hover. I was trying to get it so that normally the dock would just fully display what is in the content div (opacity=100) . As soon as the user hovered over that dock, the content div would dim out (opacity=10?) and the grab handle would appear (opacity=100). Optionally, if a properties div was present, it would also appear (opacity=100).

For some reason, when I try to set the opacity of the nested div, it has no effect. It's seems to always show 100%. But I do see that I can change it for the whole raddock but that's not what I was after. I wanted reduced opacity for something within the dock.
0
Sophy
Telerik team
answered on 10 Sep 2008, 03:39 PM
HoverDockStyleExample.zip
Hello,

Thank you for clarifying the issue. Please, find attached a modified version of the previously attached sample page which demonstrates how you could achieve the desired behavior. Note that you need to handle the OnClientDragStart and the OnClientDragEnd events of each RadDock in order to add and remove correspondingly the hover css styles which are applied to the docks.
Let us know if you need further assistance.

Best regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Happy
Top achievements
Rank 1
answered on 18 Sep 2008, 03:19 PM
Thanks, that's a bit better!

My newest issue with this drag drop treenode into a dock is that I'm trying to introduce an iframe to let me better display the source page being editted as close as possible to WYSIWYG. Orginally, I was doing everything in one page so drag-drop worked nicely, but depending on the source page, it would just not render right. So now I'm trying to make a page with the tree that hosts an iframe with the source page and docks. I can't seem to get drag drop to work into the child iframe. The tree is in the parent and the docks are in the iframe.

Is this something that could be made to work or is this a dead end?

thanks for all the help!
0
Sophy
Telerik team
answered on 23 Sep 2008, 11:27 AM
Hello Happy,

Unfortunately, it is not possible to achieve the scenario you describe if the treeview is in the parent page and the RadDockZones are in the Iframe. The Iframe is a separate page and it is not possible to drop a treeview node over it and create a RadDock in the iframe. You can add the TreeView and the RadDockZones in an Iframe but they cannot be on separate pages. You will need to choose a different approach in achieving your exact scenario.
If you have other questions, do contact us again.

Best regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
fahad
Top achievements
Rank 1
answered on 02 Feb 2009, 10:28 AM
Hello Sophy,

i am using your example DockAndTreeView.zip, i can drag from tree view and drop to RaddockZone, only one problem is when i am dropping to raddockzone the position , sometimes it position exactly where i want to drop or sometimes 2 places above where i drop it.

My findings are problem with this function :

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;    //// this line is causes problem   
            }  
        }  
        //end Get
 }        

this line  $get('currentPlaceholderPosition').value = currentPos - 2; is causing the problem when i set it to  $get('currentPlaceholderPosition').value = currentPos; it again works fine and suddenly it causes the node to drop 2 dock below in raddock zone.

Please help me.

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 04 Feb 2009, 12:03 PM
I couldn't reproduce the problem you have. I tested with IE7 . Could you please write here step by step scenario to reproduce the problem.
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 04 Feb 2009, 12:04 PM
I couldn't reproduce the problem you have. I tested with IE7 . Could you please write here step by step scenario to reproduce the problem.
0
fahad
Top achievements
Rank 1
answered on 05 Feb 2009, 10:16 AM
Dear Obi-Wan Kenobi ,

I will clear my situation: TreeView is in a UserControl, RaddockLayout and Zones are another usercontrol and both these controls are in a usercontrol, my problem is that when ever i try to add the asyncpostbacktrigger(trigger for nodedrop event of treeview) from codebehind my code give me those errors, means not inserting docks in the desired position.

Is there is any way i will add asyncpostbacktrigger at runtime and still get the same functionality.

Regards,

Syed Fahad Anwar
0
Petio Petkov
Telerik team
answered on 10 Feb 2009, 06:41 PM
Hi Syed,

Please open a new support ticket and send us a running project, where we can observe these errors. Once we receive it and reproduce the problem, we will do our best to help you.

Best regards,
Petio Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Toby
Top achievements
Rank 1
answered on 16 Sep 2009, 11:11 AM
Hi,

I have just tried your demo http://www.telerik.com/ClientsFiles/097935_DockAndTreeView.zip which works fine in IE - but it does not work properly in Firefox - when you try and drag it the node just gets stuck on the page before you get to the zone.

any ideas?

thanks

Toby
0
Pero
Telerik team
answered on 21 Sep 2009, 08:19 AM
dockandtreeview.zip
Hi Toby,

I examined the source code of the project and found an error in the definitions of some of the JavaScript methods. I have corrected the code and attached the project to the thread. There shouldn't be any problems now.

Please test it out and let me know if you still experience any of the problems.

Kind regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Toby
Top achievements
Rank 1
answered on 21 Sep 2009, 08:43 AM
thanks - thats working fine now.

cheers
Toby
0
Sam
Top achievements
Rank 1
answered on 12 Nov 2009, 01:49 PM
Hi all, I'm using 2009 Q2 and the latest project (posted by Pero) and it only seems to work for Internet Explorer, in other browsers (FireFox, Chrome, Opera) the docks are not inserted in the correct position on node drop.
 
It appears that for these browsers, zone_element.childNodes.length is 1 greater than in IE.

I'm using a quick fix of

 //GET placeholder position     
            for (var i = 0; i < zone_element.childNodes.length; i++)  
            {  
                if (zone_element.childNodes[i] == this._placeholder)  
                {  
                    var currentPos = i;  
                    var diff = 2;  
                    if (!navigator.appName.match("Microsoft Internet Explorer"))  
                    {  
                        diff++;  
                    }  
                    document.title = currentPos - diff;  
                    $get('currentPlaceholderPosition').value = currentPos - diff;  
                }  
            }  
            //end Get  

I've exhaustively tested this but it works well enough for me at the minute.

Hope this helps someone.

Cheers Sam
0
Marco
Top achievements
Rank 2
answered on 27 Oct 2010, 01:56 PM
Hi All,

The Tree method is exactly what is was looking for.

Is it also possible to make a setting to a node for the forbidden zones?
For example, parent node dropzone 1, child node dropzone 2, ect.

Regards,
Marco
0
Pero
Telerik team
answered on 01 Nov 2010, 08:08 PM
Hi Marco,

You can prevent creating of a dock in a forbidden zone by canceling the nodeDropping client-side event of the TreeView. For example the following code (OnClientNodeDropping handler) allows docking only in RadDockZone1:
    function onClientNodeDropping(sender, eventArgs)
    {
        var command = {};
        htmlElement = eventArgs.get_htmlElement();
        var className = htmlElement.className;
 
        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 (className.indexOf("RadDock") != -1)
        {
            command.commandName = "NodeDropOnHtmlElement";
        }
        else
        {
            eventArgs.set_cancel(true);
        }
 
        if (currentZone)
        {
            if (!command.commandName)
            {
                currentZone._hidePlaceholder();
            }
             
            ///TODO: Forbidden Zones logic
            if (currentZone.get_id() != "RadDockZone1")
            {
                currentZone._hidePlaceholder();
                eventArgs.set_cancel(true);
            }
             
        }
    }
 
    function onNodeDropped(obj, args)
    {
        if (currentZone)
        {
            $get("currentZoneTB").value = currentZone.get_id();
            currentZone._hidePlaceholder();
            currentZone = null;
        }
    }
</script>

You can create your own custom condition and replace the highlighted code, and then cancel the event if the condition is not satisfied.

Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Marco
Top achievements
Rank 2
answered on 02 Nov 2010, 05:26 PM
Hi Pero,

Thanks for the input

The check of the zone is now ad drop and both the zones are highlighted when you do the mouse over.
Now the user can't see witch one of the zones is allowed.

Is it possible to do it onNodeDragging?

If the node is dropped in the correct zone then it is still possible to drag the dock to the other zone.

The plan is that all the information is coming for a database, so the idea is to set a property of a node with the allowed zones or add an attribute with that info.
When dragged, read out the property and highlight the allowed zones.
When dropped, set the allowed zones to the dock.

I don't think this is possible because the dock is created when dropped and not when dragged.
Can you help me with this one?

Best regards,

Marco
0
Pero
Telerik team
answered on 05 Nov 2010, 08:09 AM
Hello Marco,

In the NodeDragging you can check for the forbidden(allowed) zones and show the placeholder over the allowed zones. The following code allows dropping only in RadDockZone1:

<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;
                    }
                }
            }
            parentNode = parentNode.parentNode;
        }
 
        //// Modify the condition to stop
        if (previousZone != null && previousZone != zone)
        {
            previousZone._hidePlaceholder();
            previousZone = null;
        }
        if (zone != null)
        {
            previousZone = zone;
            currentZone = zone;
            ///TODO: Forbidden Zones logic
            if (currentZone.get_id() == "RadDockZone1")
            {
                zone._showPlaceholder(args._node);
            }
 
        }
    }
    function onClientNodeDropping(sender, eventArgs)
    {
        var command = {};
        htmlElement = eventArgs.get_htmlElement();
        var className = htmlElement.className;
 
        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 (className.indexOf("RadDock") != -1)
        {
            command.commandName = "NodeDropOnHtmlElement";
        }
        else
        {
            eventArgs.set_cancel(true);
        }
 
        if (currentZone)
        {
            if (!command.commandName)
            {
                currentZone._hidePlaceholder();
            }
 
            ///TODO: Forbidden Zones logic
            if (currentZone.get_id() != "RadDockZone1")
            {
                currentZone._hidePlaceholder();
                eventArgs.set_cancel(true);
            }
 
        }
    }
 
    function onNodeDropped(obj, args)
    {
        if (currentZone)
        {
            $get("currentZoneTB").value = currentZone.get_id();
            currentZone._hidePlaceholder();
            currentZone = null;
        }
    }
</script>

I suppose you could store the information about the allowed zones in the Value property of the RadTreeNode object.


Regards,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Josh
Top achievements
Rank 1
answered on 23 Apr 2011, 07:16 PM
I have attempted to use this example and for some reason it creates the docks, but when i try to minize any of the docks or then move the docks around, they all disappear.  Also, i get an error that "_getBoundsWithBorderAndMargin" is undefined.  Is this example no longer valid for the new controls?

Thanks
0
Pero
Telerik team
answered on 27 Apr 2011, 02:57 PM
DockAndTreeView.zip
Hello Justin,

For your convenience I have modified the code to work with the latest version of the RadControls for ASP.NET AJAX. I have also included logic for implementing "forbidden zones" functionality into this project. The code is commented, but if you want you could uncomment it and use it. Look for "TODO: Forbidden Zones logic".

Greetings,
Pero
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
Dock
Asked by
Jay
Top achievements
Rank 1
Answers by
Sophy
Telerik team
Jay
Top achievements
Rank 1
Denny
Top achievements
Rank 2
Obi-Wan Kenobi
Top achievements
Rank 1
horsted
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Happy
Top achievements
Rank 1
fahad
Top achievements
Rank 1
Petio Petkov
Telerik team
Toby
Top achievements
Rank 1
Pero
Telerik team
Sam
Top achievements
Rank 1
Marco
Top achievements
Rank 2
Josh
Top achievements
Rank 1
Share this question
or