Create dropzone from dragged treeview node

38 posts, 1 answers
  1. Toby
    Toby avatar
    59 posts
    Member since:
    Jul 2009

    Posted 21 Sep 2009 Link to this post

    thanks - thats working fine now.

    cheers
    Toby
  2. Sam
    Sam avatar
    1 posts
    Member since:
    Jun 2008

    Posted 12 Nov 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marco
    Marco avatar
    25 posts
    Member since:
    Oct 2010

    Posted 27 Oct 2010 Link to this post

    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
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Nov 2010 Link to this post

    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
  6. Marco
    Marco avatar
    25 posts
    Member since:
    Oct 2010

    Posted 02 Nov 2010 Link to this post

    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
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Nov 2010 Link to this post

    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
  8. Justin
    Justin avatar
    4 posts
    Member since:
    Apr 2011

    Posted 23 Apr 2011 Link to this post

    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
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 27 Apr 2011 Link to this post

    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.

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