Animating Radwindow while opening and closing.

[Ivy]

Hi Telerik Support

I am opening a radwindow on the click of a radbutton and want to provide some animations while opening and closing a Radwindow. On googling I came up with a thread where the admin states that for the time being they are trying to provide more functionalities for the control and does not support animation (seems to be an old thread). Do the latest version supports animation?

Then I found that the Ajaxcontrol toolkit is providing an animation extender control which works pretty well with their modalpopupextender control and I tried to use the same animationextender with my radwindow which caused some unusual behavior in the page events especially clicks and all. So, Does the animationextender control works properly with RadWindow? If it works I wish if someone can post a full working solution here.

Thanks
Ivy

[Marin Bratanov]

Hi Ivy,

RadWindow offers a property called Animation that lets you choose from several different animations while opening - Fade, FlyIn, Resize, Slide.

The closing animation (when Animation is set to something different than None) is always Fade, however. This KB article explains how to change it to Resize if you like.

On the AnimationExtender from the AjaxControlToolkit - I have not attempted to use it with RadWindow and this is not supported by the control. Nevertheless, if it has some client-side API that you can use, you should pass the popup element of the RadWIndow (can be obtained in the OnClientShow event via the get_popupElement() client-side method). Note that this element is created with JavaScript and is not available before the OnClientShow event of the given RadWindow instance.


Regards,
Marin Bratanov
Telerik

[Hugo Augusto]

I'm using Animate CSS Library to animate Rad windows. Applying the animation  when radwindow shows is easy since all Ia have to to is set CssClass="animated fadeInDown". When the windows closes, I need to change the fadeInDown class to fadeOutUp class.

What is the best solution to achieve this and see the animation without abrupt window close?

It would be great to have a OpenCssClass and a CloseCssClass in RadWindow control.

Thank you!

[Hugo Augusto]

Meanwhile I found a possible solution to make it work with Animate CSS Library (old version) that maybe can help others to customize even further RadWindow animations. If there's a better way of dealing with this, please share it with me :)

 

So I have a RadWindow defined the following way:

<telerik:RadWindow ID="windowProponent" VisibleOnPageLoad="false" runat="server" Skin="Metro" Modal="true" RenderMode="Auto" Behaviors="Close"
Overlay="true" DestroyOnClose="false" OnClientBeforeClose="beforeClose" Title="MY WINDOW"
        MinWidth="400" CssClass="animated fadeInDown">
            <ContentTemplate>
                YOUR CONTENT HERE
            </ContentTemplate>
</telerik:RadWindow>

 

The following javascript is required to make all this work. A wrapper is added to the RadWindow so getting the clientID of our window will not work. We need to get to what Telerik calls Popup element and apply our css classes to that object. This ghost wrapper should be better documented in Telerik Docs. There's a slight reference to this container in the chapter "RadEditor Does Not Work in RadWindow" inside Dcoumentation. It took me a while to figure this out.

Getting my sender id returns "ctl00_SitePlaceHolder_SkinCustom_8_C_Container8_ctl00_windowProponent" but getting my sender popup element id returns RadWindowWrapper_ctl00_SitePlaceHolder_SkinCustom_8_C_Container8_ctl00_windowProponent

<telerik:RadCodeBlock ID="CodeBlock" runat="server">

  <script type="text/javascript">

 

    function beforeShow(sender, args) {

      var senderId = "#" + sender.get_popupElement().id;

      var el = $(senderId);

 

      el.addClass('fadeInDown');

      el.removeClass('fadeOutUp');

    }

 

  function beforeClose(sender, args) {

    args.set_cancel(true);

 

    var senderId = "#" + sender.get_popupElement().id;

    var el = $(senderId);

    el.addClass('fadeOutUp');

    el.removeClass('fadeInDown');

             

    window.setTimeout(

      function () {

        sender.remove_beforeClose(beforeClose);

        sender.close();

        sender.add_beforeClose(beforeClose);

        // Restore css 

        el.addClass('fadeInDown');
               el.removeClass('fadeOutUp');

       }, 500); // -> make sure this timeout is never inferior to the animation duration

       }

 

  </script>

</telerik:RadCodeBlock>

[Hugo Augusto]

Noticed that I forgot to remove the beforeShow() script. In this case, you can delete that function since that is taken care of in the beforeClose() script.