Move dock via dock command with animation

6 posts, 0 answers
  1. AereoN
    AereoN avatar
    36 posts
    Member since:
    Oct 2009

    Posted 29 Oct 2009 Link to this post

    Is it possible to replicate the animation occur when you drag the dock to the dock command?
    If yes, could you kindly show me a sample on how to archieve this?
    Thanks.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Nov 2009 Link to this post

    Hi,

    I am not really sure that I completely understand what exactly are you trying to implement.

    Which dock command exactly are you talking about? Can you please give more detailed about your specific scenario (explain in ordered steps how and what you need to achieve)?

    I am looking forward to hearing from you soon.

    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AereoN
    AereoN avatar
    36 posts
    Member since:
    Oct 2009

    Posted 02 Nov 2009 Link to this post

    Hi Pero,

    I have a docklayout with 2 dock zone.
    DockZone1 is used to view an active dock while DockZone2 contains few dock.
    Only 1 dock can be view in DockZone1 at a time.
    All docks contain a custom button which is the dock command.
    When the user clicks the custom button on any of the docks in DockZone2, the dock will replace the dock in DockZone1.
    [code]
                                <commands>
                                    <telerik:dockcommand onclientcommand="LoadDock" text="" />
                                </commands>
    [/code]

    I'm using the RadDock.dock(RadDockZone) to move the docks in either client or server side but there are no animation occur unlike the one happens during drag and drop.
    The question here is that is it possible to replicate the animation caused by the drag drop in either client or server side?

    Thanks.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Nov 2009 Link to this post

    Hi,

    This is not supported by the RadDock control, but you can override the default behavior of the zone.dock(RadDock, index) client-side method to play animation when the dock is moved to the new zone. Here is an example of how this method can be overridden:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
        <telerik:RadCodeBlock runat="server">
     
            <script type="text/javascript">
                function OnClientCommand(dock, args)
                {
                    $find("<%=RadDockZone2.ClientID %>").dock(dock);
                }
            </script>
     
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title 001"
                        EnableAnimation="true" DockMode="Docked">
                        <Commands>
                            <telerik:DockCommand OnClientCommand="OnClientCommand" Name="CustomCommand" />
                        </Commands>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title 002"
                        EnableAnimation="true" DockMode="Docked">
                        <Commands>
                            <telerik:DockCommand OnClientCommand="OnClientCommand" Name="CustomCommand" />
                        </Commands>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title 003"
                        EnableAnimation="true" DockMode="Docked">
                        <Commands>
                            <telerik:DockCommand OnClientCommand="OnClientCommand" Name="CustomCommand" />
                        </Commands>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px"
                    Style="float: left;">
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
     
        <script type="text/javascript">
            //FIX
            //Animation to be shown when you call zone.dock(RadDock, index) method
            Telerik.Web.UI.RadDockZone.prototype.dock = function(radDock, index)
            {
                radDock.set_animationDuration(400);
                var docks = this.get_docks();
                var dockElementToInsertBefore = null;
                if (docks.length > index)
                {
                    dockElementToInsertBefore = docks[index].get_element();
                }
                else
                {
                    dockElementToInsertBefore = this._placeholder;
                }
                this._dockBefore(radDock, dockElementToInsertBefore, false, true);
            }
        </script>
     
        </form>
    </body>
    </html>



    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. AereoN
    AereoN avatar
    36 posts
    Member since:
    Oct 2009

    Posted 05 Nov 2009 Link to this post

    This is something that I'm looking for.
    However how do I get the document on overriding the radcontrols behavior?
    There is no intelliSense to tell me what does these method do.
    For this example, the dock animation are only moving to the right when I need them to move to the left instead.
    And I want the dock to move to the top index always instead of going to the bottom.
    I'm not sure what do I need to configure to archive that result.

    Thanks.
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 11 Nov 2009 Link to this post

    Hi,

    To move the RadDock to a certain index in the RadDockZone you should use the RadDockZone.dock(RadDock, index) client-side method.

    Please note that providing custom solutions and functionality (which is not supported by the RadControls, in this case the RadDock) is beyond the scope of our support. These animations as I said in my earlier post are not supported by the RadDock control and, unfortunately there is no easy way to make the dock behave as specified in your scenario (there is no easy way to do it without breaking other functionality). Please note that we will log this feature in our list for future developments of the RadDock and we will do our best to implement it for some of the next releases.    


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017