Is bootstrap style open animation available for RadWindow?

[David]

Hi,

I am using asp.net and using a RadWindow for a modal popup. It works fine and i have tried the various animations provided (FlyIn, Fade, Resize, Slide).

However, my management prefers the Bootstrap open animation where the modal slides in from the top center of the window. Could you please tell me how i can do this type of animation with a RadWindow?

Thank you.

David

 

 

[Marin Bratanov]

Hi David,

RadWindow does not have such a provision.

The only suggestion I can make is that you use the OnClientShow event to animate the popup as desired (sender.get_popupElement() will return that DOM object reference).

Regards,

Marin Bratanov
Progress Telerik

[Marin Bratanov]

A quick update, the getWindowBounds() method can be useful to provide you with the necessary x and y coordinates for the end of your animation: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object#methods-that-check-a-condition-or-invoke-a-certain-behavior.

[David]

Hi Mark,

Thanks for the responses.

Regarding your first reply, "The only suggestion I can make is that you use the OnClientShow event to animate the popup as desired (sender.get_popupElement() will return that DOM object reference).",  do you have some links to sites that explain how to do this?

Thank you.

David

[Marin Bratanov]

Hello David,

The jQuery animate() method is an easy way to do this: http://api.jquery.com/animate/.

Here is a basic example:

<telerik:RadWindow runat="server" ID="rw1" Animation="None" OnClientShow="OnClientShow" VisibleOnPageLoad="true"></telerik:RadWindow>
<script>
    function OnClientShow(sender, args) {
        var centeredBounds = sender.getWindowBounds();
        sender.moveTo(centeredBounds.x, 0 - centeredBounds.height);
        $telerik.$(sender.get_popupElement()).animate({
            top: centeredBounds.y
        }, 2000);
    }
</script>

Regards,

Marin Bratanov
Progress Telerik

[David]

Hello Marin,

Thank you for the fast and very helpful answer. I was able to get it working with your code and learned some new things.

Sorry for getting your name wrong previously. 

Thanks again,

David