Clone dock item

6 posts, 0 answers
  1. Dan
    Dan avatar
    5 posts
    Member since:
    Apr 2008

    Posted 02 Apr 2008 Link to this post

    I am looking for a way to clone, or dynamically create a doc item when I drag a control onto a doc zone.  I saw an example somewhere of this being used with rad controls, but I can't figure a way to do this.  As an example, I want to be able to drag something from a toolbox and have a raddoc be created where I drop it.

    Is there any way to achieve this?

    Thank you
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 03 Apr 2008 Link to this post

    You should create dynamically RadDock via Ajax(It cannot be cloned on the client), after that you should handle the RadDock.OnClientInitialize event an move the RadDock via javascript.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    5 posts
    Member since:
    Apr 2008

    Posted 07 Apr 2008 Link to this post

    I was trying to find a way to Drag an item off a tree view control onto a radzone and have a dock be created.  I know that I'll have to do that on the server side, but I would like to have the dock area be highlighted like I was dragging a dock already.  Is there an example of this, or can I get some direction on how this would be accomplished.

    Thank you again,
    Dan
  5. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 07 Apr 2008 Link to this post

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

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

    Codebehind:
    using System;  
    using System.Data;  
    using System.Configuration;  
    using System.Collections;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Web.UI.HtmlControls;  
    using Telerik.Web.UI;  
     
    public partial class TreeView_DragDrop : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
     
        }  
        protected void tree1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)  
        {  
            if (e.HtmlElementID == RadDockZone1.ClientID)  
            {  
                RadDock rdo = new RadDock();  
                rdo.Text = rdo.ID = System.DateTime.Now.ToString();  
                RadDockZone1.Controls.Add(rdo);  
            }  
     
        }  
     
    }  
     

  6. Denny
    Denny avatar
    13 posts
    Member since:
    May 2008

    Posted 06 Jun 2008 Link to this post

    Hi Obi-Wan Kenobi  i have just load up the example you have provided, it seems that the loop is go on infinite when i try to drag a tree node and hence crashed my IE or Firefox. Do i miss something here?

    Denny
  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 09 Jun 2008 Link to this post

    It seems that the code is messed up when I paste it.
    All you need to do is to change 
    parentNodeparentNode = parentNode.parentNode;
    to
    parentNode = parentNode.parentNode;

    and everything should be ok.






Back to Top
UI for ASP.NET Ajax is Ready for VS 2017