Hi!
When a Dock is collapsed (dock.set_collapsed(true)), I do some custom javascript where I calculate heights of docks in my dock layout. But when using animation (dock.set_collapsed(true, true)), my calculations gets incorrect since the animation is ended AFTER my calculation.
Is there any way of subscribing to an animation ended event so I can do my calculations when the animation has ended?
Regards
When a Dock is collapsed (dock.set_collapsed(true)), I do some custom javascript where I calculate heights of docks in my dock layout. But when using animation (dock.set_collapsed(true, true)), my calculations gets incorrect since the animation is ended AFTER my calculation.
Is there any way of subscribing to an animation ended event so I can do my calculations when the animation has ended?
Regards
3 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2009, 02:36 PM
dock.get_animationDuration() - will return the animation time, so you can invoke the code you want to execute with timeout, e.g.
dock.set_collapsed(true);
window.setTimeout(function myFunc(){
....code goes here...
}, dock.get_animationDureation());
dock.set_collapsed(true);
window.setTimeout(function myFunc(){
....code goes here...
}, dock.get_animationDureation());
0
Gunnar
Top achievements
Rank 1
Rank 1
answered on 09 Nov 2009, 07:26 AM
Thank's for the tip!
I will use it in my code.
But I don't like being dependent on timeouts.
Can't I get a reference to a animation object and then subscribe to an event when the animation has ended?
Regards
I will use it in my code.
But I don't like being dependent on timeouts.
Can't I get a reference to a animation object and then subscribe to an event when the animation has ended?
Regards
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2009, 04:02 PM
Another approach is to handle RadDock's OnClientCommand event, e.g.
| <%@ 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 id="Head1" runat="server"> |
| <title></title> |
| <script type="text/javascript"> |
| function DockCommand(dock, args) |
| { |
| if (args.Command.get_name() == "ExpandCollapse") |
| { |
| alert("do something here"); |
| } |
| } |
| function DockCollapse() |
| { |
| var dock = $find("RadDock1"); |
| dock.set_collapsed(true,true); |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <input type="button" value="collapseDock" onclick="DockCollapse()" /> |
| <div> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> |
| <telerik:RadDock ID="RadDock1" runat="server" Width="300px" |
| Title="Title" EnableAnimation="true" |
| OnClientCommand ="DockCommand" |
| > |
| <ContentTemplate> |
| sssssssssss<br /> |
| sssssssssss<br /> |
| sssssssssss<br /> |
| sssssssssss<br /> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| </form> |
| </body> |
| </html> |