Centering a Telerik RadGrid PopupForm on the Page

Printer-friendly version

I've been working on a project involving the Telerik controls and had a need to center a popup edit form on the page. I've seen lots of code similar to the below that centers the popup on the RadGrid, but not the actual page: [javascript] function centerPopup(sender, args) { popUp = args.get_popUp(); var pageWidth = $(window).width(); var pageHeight = $(window).height(); var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px")); var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px")); popUp.style.top = ((pageHeight - popUpHeight) / 2) + "px"; popUp.style.left = ((pageWidth - popUpWidth) / 2) + "px"; } [/javascript] In order to get the popup form centered on the page, add this line before the setting of the top and left: [javascript] popUp.style.position = "fixed"; [/javascript] It’s that simple. In all the explanations I've seen, no one has said that by setting the position to “fixed” it centers on the page, not the grid.

About the Author:

TopLine Strategies delivers the complete integration and development of sales, marketing and customer service technologies that enable corporate clientele to improve revenue streams and strengthen customer interactions. Our project management and consulting is designed to achieve timely delivery, 100 percent user adoption of the technologies we implement and deliver measurable returns on investments for our clients.

Comments (0)

Related Blogs

TheReact Native Open Source roadmap was announced in Q4 2018 after they decided to invest more in the React Native open source community.

October is not just about pumpkins, fall foliage, and cooler temps anymore. October 2018 also means the exciting introduction of Microsoft Dynamics 365 for Customer Engagement.

Back in 2016, Microsoft introduced its intentions to refresh its CRM and ERP strategy with Dynamics 365. At the heart of its services was the Common Data Model (CDM).