Is bootstrap style open animation available for RadWindow?

6 posts, 3 answers
  1. David
    David avatar
    3 posts
    Member since:
    Aug 2017

    Posted 22 Dec 2017 Link to this post

    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

     

     

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4231 posts

    Posted 25 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4231 posts

    Posted 25 Dec 2017 Link to this post

    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.

  4. David
    David avatar
    3 posts
    Member since:
    Aug 2017

    Posted 27 Dec 2017 in reply to Marin Bratanov Link to this post

    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

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4231 posts

    Posted 28 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. David
    David avatar
    3 posts
    Member since:
    Aug 2017

    Posted 28 Dec 2017 in reply to Marin Bratanov Link to this post

    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

     

     

Back to Top