RadDockZones ClientSide Drop Issue

[Nutter]

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.

[Slav]

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