animation not working on window in asp.net mvc

2 posts, 1 answers
  1. Liza
    Liza avatar
    3 posts
    Member since:
    Oct 2012

    Posted 09 Oct 2012 Link to this post

    i cannot get the animation effects on open and close working. 
    Im using the following code: 
    @{
        Html.Kendo().Window()
            .Name(winname)
            .Title(title)
            .Events(builder => builder.Close("KendoWinOnClose").Open("KendoWinOnLoad"))
            .Actions(builder=> builder.Close().Maximize().Minimize())
           .Animation(x=> x.Close(builder => builder.Fade(FadeDirection.Out)).Open(builder => builder.Fade(FadeDirection.In)).Enable(true))
            .Content(@<text>
                          
                          
                         <script type="text/javascript" language="javascript">
                             function KendoWinOnClose() {
                                  $("#@winname").data("kendoWindow").destroy();
                               
                           }


                           function KendoWinOnLoad() {
                                $("#@winname").data("kendoWindow").center();
                          }


                       </script>
          
                          <p>
                              Alvar Aalto is one of the greatest names in modern architecture and design.
                              Glassblowers at the iittala factory still meticulously handcraft the legendary
                              vases that are variations on one theme, fluid organic shapes that let the end user
                              ecide the use. Interpretations of the shape in new colors and materials add to the
                              growing Alvar Aalto Collection that remains true to his original design.
                          </p>
     
                      </text>)
            .Draggable()
            .Resizable()
            .Width(width)
            .Height(height)
            .Modal(modal)
            .Resizable(x => x.Enabled(true))
            .Render();
    }



    any ideas ?

  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Oct 2012 Link to this post

    Hello Liza,

    There are two different reasons for the different animations not to work.
    1. The window is initially visible - which means the window and its content will be visible when the page has finished loading. To show the animation to the user you can make the window initially hidden and open it when the document has finished loading.
      @{
          Html.Kendo().Window()
              .Name("test")
              //...
              .Visible(false)
              .Render();
      }
       
       
      <script type="text/javascript">
          $(function () {
              $('#windowName').data().kendoWindow.open()
          })
      </script>
    2. The closing animation is not visible because in your close handler you destroy the window and thus the window is removed before the animation has even started. I would suggest you to use the deactivate event instead.
      .Events(builder => builder.Deactivate("KendoWinOnClose").Open("KendoWinOnLoad"))

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top