Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Window / How to use an OffsetElement with animations

How to use an OffsetElement with animations

Article Info

Rating: Not rated

Article information

Article relates to

 RadWindow for ASP.NET AJAX

Created by

 Marin Bratanov, Telerik

Created on

 6th of January 2012



HOW-TO:
Use an animation when opening a RadWindow that must have a certain position according to an HTML element on the page (OffsetElement).



DESCRIPTION:
Currently the RadWIndow's animation takes place before it is repositioned according to the Top and Left properties when an OffsetElementID is set. This means that in this scenario the animation will take place in the center of the screen and when it is finished the RadWindow will be positioned properly. This would rarely be the desired effect, yet for the time being this will not be changed internally to avoid a breaking change.


RadControls for ASP.NET AJAX



SOLUTION:
You can use the OnClientBeforeShow event to set the position of the RadWindow according to the desired element via jQuery and the RadWIndow's client-side API. Thus instead of setting the Top, Left, OffsetElementID properties you need to have them in JavaScript variables:
var offsetEl = $telerik.$("#offsetDiv"); //position the window according to the div with ID myDiv
//var offsetEl = $telerik.$("#" + oWnd.get_openerElementID()); //position the window according to the OpenerElement
var coords = offsetEl.offset();
var topOffset = 120; //this is the vertical offset
var leftOffset = 120; //this is the horizontal offset
oWnd.moveTo(coords.left + leftOffset, coords.top + topOffset);

A simple page that shows this approach in action is attached to the article as well.

Files

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.