Move dock via dock command

3 posts, 1 answers
  1. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 15 Jun 2009 Link to this post

    Hi all,

    I was wondering if it's possible to move a dynamically created dock up or down (within it's dynamically created zone) by the user clicking on a dock's command (client or server side code, just as long as there is a postback at some stage after the move to save the new position)?

    For example, I have a dynamically created zone with 3 dynamically created docks (1, 2, 3 - in that order) and the user wants to move dock 1 to be in position 2 (so then the order would be 2, 1, 3), is it possible to do that by clicking on a command rather than by them dragging the dock to position 2?

    I've tried zone.Docks.Insert(2, dock) and zone.Controls.AddAt(2, dock) without success, but the dock doesn't move.

    The reason I ask is that some docks are long and if the dock content goes down beyond the height of the browser then you can't drag a dock below that long one.

    I should mention that the zones and docks are all created dynamically (based on a database) and during postbacks/ajax call backs docks are saved to the session and recreated on init.

    Any ideas?

    My current solution is to allow users to minimise the dock contents, thus removing the issue of long docks breaking over the page, but I would have thought it was a fairly basic and desired functionality to be able to have dock commands that move docks up and down.

    Thanks,
    Pete
  2. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 15 Jun 2009 Link to this post

    This functionality is no longer required, if someone wants to answer this for anyone else out there who's interested then go for it, but I no longer require this.

    Thanks anyway
  3. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 16 Jun 2009 Link to this post

    Hello Pete,


    We have created a sample project that demonstrates the moving the RadDocks Up or Down in a RadDockZone. Two custom commands (Move Up and Move Down) are added to every RadDock. Additionally, two handler methods are implemented on the client that handle the OnClientCommand event of every custom command. Below is the full source code of the sample project:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadPane218935._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
     
        <script type="text/javascript"
            function MoveUp_Dock(dock, args) 
            { 
                var dockdockIndex = dock.get_index();   // get the current index of the dock 
                var zone = dock.get_dockZone();       // get the zone where the dock is docked 
     
                if (dockIndex > 0) { 
                    dock.undock();                      //undock it and  
                    zone.dock(dock, dockIndex - 1);     //then move it up or down  
                } 
                else { 
                    alert("This object can't be moved up"); 
                } 
            } 
     
            function MoveDown_Dock(dock, args) 
            { 
                var dockdockIndex = dock.get_index();   // get the current index of the dock 
                var zone = dock.get_dockZone();       // get the zone where the dock is docked 
                if (dockIndex > zone.get_docks().length - 2) { 
                    alert("This object can't be moved down"); 
                } 
                else { 
                    dock.undock();                      //undock it and  
                    zone.dock(dock, dockIndex + 1);     //then move it up or down 
                } 
            }  
      
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockZone ID="RadDockZone1" runat="server"
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1"
                    <Commands> 
                        <telerik:DockCommand Name="MoveUp" Text="MoveUp" OnClientCommand="MoveUp_Dock" /> 
                        <telerik:DockCommand Name="MoveDown" Text="MoveDown" OnClientCommand="MoveDown_Dock" /> 
                    </Commands> 
                    <ContentTemplate> 
                        1. FIRST RadDock - Content 
                        <br /> 
                        <br /> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock2"
                    <Commands> 
                        <telerik:DockCommand Name="MoveUp" Text="MoveUp" OnClientCommand="MoveUp_Dock" /> 
                        <telerik:DockCommand Name="MoveDown" Text="MoveDown" OnClientCommand="MoveDown_Dock" /> 
                    </Commands> 
                    <ContentTemplate> 
                        2. SECOND RadDock - Content 
                        <br /> 
                        <br /> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock3"
                    <Commands> 
                        <telerik:DockCommand Name="MoveUp" Text="MoveUp" OnClientCommand="MoveUp_Dock" /> 
                        <telerik:DockCommand Name="MoveDown" Text="MoveDown" OnClientCommand="MoveDown_Dock" /> 
                    </Commands> 
                    <ContentTemplate> 
                        3. THIRD RadDock - Content 
                        <br /> 
                        <br /> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock4" runat="server" Title="RadDock4"
                    <Commands> 
                        <telerik:DockCommand Name="MoveUp" Text="MoveUp" OnClientCommand="MoveUp_Dock" /> 
                        <telerik:DockCommand Name="MoveDown" Text="MoveDown" OnClientCommand="MoveDown_Dock" /> 
                    </Commands> 
                    <ContentTemplate> 
                        4. FOURTH RadDock - Content 
                        <br /> 
                        <br /> 
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock5" runat="server" Title="RadDock5"
                    <Commands> 
                        <telerik:DockCommand Name="MoveUp" Text="MoveUp" OnClientCommand="MoveUp_Dock" /> 
                        <telerik:DockCommand Name="MoveDown" Text="MoveDown" OnClientCommand="MoveDown_Dock" /> 
                    </Commands> 
                    <ContentTemplate> 
                        5. FIFTH RadDock - Content 
                        <br /> 
                        <br /> 
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </div> 
        </form> 
    </body> 
    </html> 
     



    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top