How to subscribe to animation ended event?

4 posts, 0 answers
  1. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 06 Nov 2009 Link to this post

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

    Posted 06 Nov 2009 Link to this post

     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());

     

     

     

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 09 Nov 2009 Link to this post

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

    Posted 11 Nov 2009 Link to this post

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