Drag'n'Copy docks

[paal_a]

I'm trying to use RadDock controls to create a dashboard to host docks. The different dock types (called widgets) are to be shown in a library (list) on a collapsable panel the right side of the screen. To add docks to the dashboard you simply drag-n-drop them from the library into the zone you want.

1. I'm unable to mix RadDockLayout and RadDockZone with a RadSplitter. Is it possible to create a page with a collapsable RadDockZone to act as a "library"?

2. The library zone is programatically populated with docks based on a plugin system (i.e. widgets). When dragged onto a DockZone I want to copy it, not move it. Is this possible?

All RadDock demo's I find populates the zones by clicking a "Add button". I'd find it much more userfriendly to drag an item from a library onto the zone of choice.

Any help is apprecieted.

[Petko]

Hi Pal,

    1.I prepared a small sample for you, that shows how to achieve the desired behavior. ASPX:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <telerik:RadSplitter ID="RadSplitter1" runat="server">
          <telerik:RadPane ID="RadPaneLeft" runat="server" Locked="true" Width="700px" Height="700px">
            <telerik:RadDockLayout ID="RadDockLayout2" runat="server">
                <telerik:RadDockZone ID="RadDockZone4" runat="server" Width="120px" Height="100px"></telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="120px" Height="100px"></telerik:RadDockZone>
            </telerik:RadDockLayout>
          </telerik:RadPane>
              <telerik:RadPane ID="RadPaneRight" runat="server" Locked="true" Width="50px" Scrolling="None">
                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="50px" SlideDirection="Left" ClickToOpen="true">
                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Library">
                        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="100px" Width="120px">
                                <telerik:RadDock ID="RadDock1" runat="server" Width="120px" Height="100px"
                                 ForbiddenZones="RadDockZone2"><ContentTemplate>Widget 1</ContentTemplate></telerik:RadDock>
                            </telerik:RadDockZone>
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="100px" Width="120px">
                                <telerik:RadDock ID="RadDock2" runat="server" Width="120px" Height="100px"
                                 ForbiddenZones="RadDockZone1"><ContentTemplate>Widget 2</ContentTemplate></telerik:RadDock>
                            </telerik:RadDockZone>
                           </telerik:RadDockLayout>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>

     
2. You can achieve the "Dock copy" effect by creating dynamically a new dock in the library zones, when the dragged dock is docked in the "choice zones".

You can use the online example "My Portal" to populate the RadDockZones dynamically. Just place the method CreateRadDock in the Page_load method, when isPostBack is false.
Hope this helps you. 


Sincerely yours,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jrit]

I'd like to achieve the functionality in #2 but without AJAX, by just using client side javascript - are there any samples that accomplish that? The other part of this would be that if you dragged the duplicate back to the original dock it should be closed (not visible) at that point so there is not a duplicate dock in the source dockzone.

Any reference or suggestions are appreciated. Thanks.

[Obi-Wan Kenobi]

The RadDock couldn't be created on the client, because it is with server-side rendering. The only one way is to create a RadDock via Ajax/Postback.