RadDockZones ClientSide Drop Issue

2 posts, 0 answers
  1. Nutter
    Nutter avatar
    1 posts
    Member since:
    Sep 2008

    Posted 09 Mar 2013 Link to this post

    i'm creating a dynamic page where i have two layouts: "main layout" and "toolbox layout". I can drag RadDock from "toolbox layout" to  "main layout". The docks within "toolbox layout" has the next structure: RadDock with a ContentTemplate with a RadDockZone inside it.

    For drag&drop action i´m using a clone method (i found it in this forum) like this:

    function WrapperOnClientDragStart(dock, args) {

        // ###

        //Get a reference to the RadDock HTML element
        var dockElement = dock.get_element();

        //Create a cloned elements
        var clonedDock = dock.clone();
        var clonedElement = clonedDock.get_element();

        //Get the ZoneID from which the dock is initially dragged
        parentToolBoxZoneID = clonedDock.get_dockZoneID();

        // ### MANAGE ZONES

        // Set Forbidden Zones
        var forbiddenZones = clonedDock.get_forbiddenZones();
        forbiddenZones[forbiddenZones.length] = dock.get_dockZone().get_uniqueName();
        clonedDock.set_forbiddenZones(forbiddenZones);

        // ### MANAGE EVENTS
                
        //Detach the OnClientDragStart handler method from the cloned dock or recursion will occur
        clonedDock.remove_dragStart(WrapperOnClientDragStart);

        //Attach the OnClientDragEnd handler method to the DragEnd client-side event
        clonedDock.add_dragEnd(WrapperOnClientDragEnd);

        //Attach the OnClientDockPositionChanged handler method to the DockPositionChanged client-side event
        //clonedDock.add_dockPositionChanged(OnClientDockPositionChanged);

        // Hide reference dock (need before manage handle)
        dockElement.style.display = 'none';

        // ### MANAGE HANDLE

        //Create an event which will change the currently dragged RadDock - it will be cloned RadDock
        var ev = args.ownerEvent;
        var handle = clonedDock.get_handle();
        if (document.createEventObject) {
            // create event for IE
            var evt = document.createEventObject();
            evt.clientX = ev.clientX;
            evt.clientY = ev.clientY;
            handle.fireEvent("onmousedown", evt)
        }
        else {
            // create event for FF and others
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("mousedown", !ev.cancelBubble, ev.cancelable, ev.view, ev.detail, ev.screenX, ev.screenY, ev.clientX, ev.clientY, ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey, ev.button, null);
            handle.dispatchEvent(evt);
        }
                
        //Show original RadDock (need afeter manage handle)      
        dockElement.style.display = '';

        //Hack: a placeholder stays visible so we should hide it programatically
        dock.get_dockZone().hidePlaceholder();
        args.set_cancel(true);

    }

    The cloned dock is dropped correctly in the "main layout". But the problem begins when i try drop other simple docks inside the recently RadDock/RadDockZone item. Seem as if a RadDockZone isn´t enable to drop elements.

    I´ve tried set AllowedZones in WrapperOnClientDragStart client side script but isn´t work.

    Someone can i help me?

    Thanks.

  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Mar 2013 Link to this post

    Hi Nutter,

    You are not able to dock the RadDocks in the inner RadDockZone of the copied dock, because the client-side object of the copied dock zone is not created thus you cannot use its client-side functionality. To enable the dock zone you should copy it as well and replace the duplicated element in the content of the copied dock. This can be accomplished in the event handler WrapperOnClientDragEnd of the new dock as shown below:
    function WrapperOnClientDragEnd(sender, args) {
        // removes the rendering of the old inner dock zone
        var contentContainer = sender.get_contentContainer();
        contentContainer.removeChild(contentContainer.getElementsByTagName("div")[0]);
     
        // creates a copy of the dock zone from the original dock and inserts it in the content of the copied dock
        var innerDockZone = $find("<%=rdz1.ClientID %>"); // replace rdz1 with the ID of the inner RadDockZone on your end
        var zone = innerDockZone.clone();
        sender.get_contentContainer().appendChild(zone.get_element());
    }

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top