Drag'n'Copy docks

4 posts, 0 answers
  1. paal_a
    paal_a avatar
    2 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2008 Link to this post

    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.
  2. Petko
    Admin
    Petko avatar
    45 posts

    Posted 05 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jrit
    jrit avatar
    16 posts
    Member since:
    Jun 2006

    Posted 06 May 2009 Link to this post

    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.
  5. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 07 May 2009 Link to this post

    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.
Back to Top