Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Move dock via dock command with animation

5 Answers 77 Views
Dock
This is a migrated thread and some comments may be shown as answers.
AereoN
Top achievements
Rank 1
AereoN asked on 29 Oct 2009, 06:32 AM
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.

5 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 02 Nov 2009, 01:33 PM
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.
0
AereoN
Top achievements
Rank 1
answered on 03 Nov 2009, 02:37 AM
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.
0
Pero
Telerik team
answered on 05 Nov 2009, 11:33 AM
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.
0
AereoN
Top achievements
Rank 1
answered on 06 Nov 2009, 03:01 AM
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.
0
Pero
Telerik team
answered on 11 Nov 2009, 02:05 PM
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.
Tags
Dock
Asked by
AereoN
Top achievements
Rank 1
Answers by
Pero
Telerik team
AereoN
Top achievements
Rank 1
Share this question
or