This is a migrated thread and some comments may be shown as answers.

Popup window Location?

35 Answers 1692 Views

Grid

This is a migrated thread and some comments may be shown as answers.

35 Answers, 1 is accepted

Accepted

answered on 20 Jan 2009, 04:00 AM

Hi Michael,

Did you try with the OnPopUpShowing client event where you can set the position of the editfrom Pop-up on the page ?

ASPX:

    
            <ClientSettings>  
        
              <ClientEvents OnPopUpShowing="PopUpShowing" /> 
        
            </ClientSettings>

JS:

    
             <script type="text/javascript"> 
        
               var popUp; 
        
               function PopUpShowing(sender, eventArgs) 
        
               { 
        
                   popUp = eventArgs.get_popUp(); 
        
                   var gridWidth = sender.get_element().offsetWidth; 
        
                   var gridHeight = sender.get_element().offsetHeight; 
        
                   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.left = ((gridWidth - popUpWidth)/2 + sender.get_element().offsetLeft).toString() + "px"; 
        
                   popUp.style.top = ((gridHeight - popUpHeight)/2 + sender.get_element().offsetTop).toString() + "px"; 
        
               } 
        
            </script>

Shinu

answered on 28 Jan 2009, 11:11 AM

This script is nice, but for me there are two problems.

1. It breaks on Firefox on the Mac, with some error about being unable to parse 123.5 pixels or similar. To fix this you have to use the floor function to round the pixel result to an integer:

    
            popUp.style.left = (Math.floor((gridWidth - popUpWidth)/2) + sender.get_element().offsetLeft).toString() + "px";   
        
            popUp.style.top = (Math.floor((gridHeight - popUpHeight)/2) + sender.get_element().offsetTop).toString() + "px";

2. The centering is relative to the grid, which is ok when you don't have a tall grid, but when you have scrolled down, eg with a hierarchical grid where things are expanded, then the popup form can open off the page, and the user has to scroll the page to find it.

So does someone have an example of centering the popup form on the page, ie within the browser window? I experimented with setting the style to "40%" but that didn't work, as it is still relative to the grid it seems.

Thanks, Steve

answered on 28 Jan 2009, 12:22 PM

Hi Steve,

The logic for centering the popup form over the whole page is the same as centering it over the grid. The difference is that you need to use the window width and height in the calculations instead of the grid width and height.
Try the below code:

    
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
            <script type="text/javascript">  
        
               var popUp;  
        
               function PopUpShowing(sender, eventArgs)  
        
               {  
        
                   popUp = eventArgs.get_popUp();  
        
                   var windowHeight = document.body.offsetHeight;  
        
                   var windowWidth = document.body.offsetWidth;  
        
                   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.left = (Math.floor((windowWidth - popUpWidth)/2)).toString() + "px";  
        
                   popUp.style.top = (Math.floor((windowHeight - popUpHeight)/2)).toString() + "px";  
        
               }  
        
            </script>  
        
            </telerik:RadCodeBlock>

Let me know if this works for you.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 28 Jan 2009, 02:41 PM

Iana, thanks for the quick reply.

The code works ok when there is no scrolling of the page, but it doesn't work well when there is scrolling. The scroll position has to be taken into account, and I modified the code to include document.documentElement.scrollTop:

    
            var popUp;  
        
            function PopUpShowing(sender, eventArgs)   
        
            {  
        
                popUp = eventArgs.get_popUp();

                var scrollTop = document.documentElement.scrollTop; 
        
                var windowHeight = document.body.offsetHeight - scrollTop;  
        
                var windowWidth = document.body.offsetWidth;  
        
                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.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";  
        
                popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2) + scrollTop).toString() + "px";  
        
            }

This works fine for me now. The scrollTop property is populated of in IE7, but I'm not sure if it is always reliable in other versions or browsers like Firefox.

One thing, it would be really nice to have a property of the PopUpSettings to avoid the code, something like:

    
            <PopUpSettings Width="600px" Height="440px" CenterOnPage="True" />

Many thanks, Steve

answered on 28 Jan 2009, 07:25 PM

Steve.

Thanks for posting your amended code to center the popup on the screen - I've already adopted it in my app.

However, I had a little problem because the height of my popups are automatic as I have a variable height popup based on the number of controls displayed. If you do it this way, the popUp.style.height variable is not set (it actually is an empty string) so the whole calculation for vertical centering is incorrect. To get around it, I've put in a real big hack which goes - if the popUp.style.height is "" then set it to 400. Here's the actual code...

    
            function PopUpCentered(sender, eventArgs) { 
        
                var popUp = eventArgs.get_popUp(); 
        
                var scrollTop = document.documentElement.scrollTop; 
        
                var windowHeight = document.body.offsetHeight - scrollTop; 
        
                var windowWidth = document.body.offsetWidth; 
        
                var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px")); 
        
                var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px")); 
        
                if (popUpHeight == "") popUpHeight = 400; 
        
                popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px"; 
        
                popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2) + scrollTop).toString() + "px"; 
        
            }

Now I know this is really bad :-(, but it gets me by in the short term. Does anyone know how to obtain the derived (calculated) popup height?

Thanks,
Steve

btw: I absolutely support some form of popup location declaration as you describe. I have asked for it previously in another support request. Plus I've asked for another popup type using a radwindow supported directly within the radgrid.

answered on 30 Jan 2009, 10:36 PM

Steve.

I've modified the code to work in firefox. I've also tested it in chrome and safari. If you're up to it, can you check it out in IE to make sure I didn't break anything you had developed.

One last thing. I made the popup "fixed" so you can still scroll the underlying window and the popup stays put. It works for me given I have some long scrollable forms and my popup is modal. If you don't like it you can comment it out and it will default to "absolute".

    
            // 
        
            // Show popup editform centered on the page and in fixed position 
        
            // 
        
            function PopUpCentered(sender, eventArgs) { 
        
                var popUp = eventArgs.get_popUp(); 
        
                var scrollTop = (typeof window.innerHeight != 'undefined' ? 0 :document.documentElement.scrollTop); 
        
                var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px")); 
        
                var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px")); 
        
                var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight - scrollTop); 
        
                var windowWidth = document.body.offsetWidth;   
        
                if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px 
        
                popUp.style.position = "fixed"; 
        
                popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px"; 
        
                popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2) + scrollTop).toString() + "px";  
        
            }

Regards, Steve

answered on 12 Feb 2009, 05:19 PM

I tried to use the previous code snippet and found it did not work on IE. The window tends to drift downward at 1/2 the rate of scroll position. This is because the scroll position is being subtracted from the height which is then divided by 2 and then the scroll height is being added in again. It happens to work on FIrefox and other browsers because the scroll position is always set to 0.
Setting the popup position to "Fixed" is a good idea but it negates the need for uptaining the scroll position. When you set the position of a fixed item, it is relative to the top of the window by default.

The following works well and is less code:

    
                function PopUpCentered(sender, eventArgs) {  
        
                    var popUp = eventArgs.get_popUp();  
        
                    var popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));  
        
                    var popUppopUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));  
        
                    var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);  
        
                    var windowWidth = document.body.offsetWidth;  
        
                    if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px  
        
                    popUp.style.position = "fixed";  
        
                    popUp.style.left = (Math.floor((windowWidth - popUpWidth)  / 2)).toString() + "px";  
        
                    popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";  
        
                }

If you do want to get the scroll position in stead of using "Fixed", the follownig works for all browsers

    
                            function getScrollHeight() {  
                    
                                var h = window.pageYOffset ||  
                    
                                   document.body.scrollTop ||  
                    
                                   document.documentElement.scrollTop;  
                    
                                return h ? h : 0;  
                    
                            }

answered on 14 Jul 2009, 09:01 AM

popupeditform.zip

Hello Sean,

I followed your requirements and prepared a sample project for you (attached to this post). Give it a try and let me know if this works for you.

Regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 13 Feb 2010, 09:35 PM

Thanks for everyone's input. I've refactored further to allow optional width / height parameters in case it's not defined in the style:

                             
                    function centerElementOnScreenAbsolute(element, elmWidth, elmHeight) {         
                        var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;         
                        var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;         
                        var viewPortHeight = document.body.clientHeight || document.documentElement.clientHeight || 0;         
                        var viewPortWidth = document.body.clientWidth || document.documentElement.clientWidth || 0;         
                        if (elmWidth == null) {         
                            var w = element.style.width.substr(0, element.style.width.indexOf("px"));         
                            elmWidth = w != "" ? w : element.offsetWidth;         
                        }         
                        if (elmHeight == null) {         
                            elmHeight = element.offsetHeight;         
                            var h = element.style.height.substr(0, element.style.height.indexOf("px"));         
                            elmHeight = h != "" ? h : element.offsetHeight;         
                        }         
                        var topOffset = Math.ceil((viewPortHeight - elmHeight) / 2);         
                        var leftOffset = Math.ceil((viewPortWidth - elmWidth) / 2);         
                        var top = scrollTop + topOffset;         
                        var left = scrollLeft + leftOffset;         
                        element.style.position = "absolute";         
                        element.style.top = top + "px";         
                        element.style.left = left + "px";         
                    } 
            
                    
                    function centerElementOnScreenFixed(element, elmWidth, elmHeight) {         
                        if (elmWidth == null || elmWidth == "") {         
                            var w = element.style.width.substr(0, element.style.width.indexOf("px"));         
                            elmWidth = w != "" ? w : element.offsetWidth;         
                        }         
                        if (elmHeight == null || elmHeight == "") {         
                            elmHeight = element.offsetHeight;         
                            var h = element.style.height.substr(0, element.style.height.indexOf("px"));         
                            elmHeight = h != "" ? w : element.offsetHeight;         
                        }                     
                        var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);         
                        var windowWidth = document.body.offsetWidth;         
                        element.style.position = "fixed";         
                        element.style.left = (Math.floor((windowWidth - elmWidth) / 2)).toString() + "px";         
                        element.style.top = (Math.floor((windowHeight - elmHeight) / 2)).toString() + "px";         
                    }         

answered on 22 Mar 2010, 04:21 PM

Hi Ed,

Popu up is not showing up in IE but works good for Firefox with the following code u posted. And even I tried

the code posted by Steve on Jan28, nothing seems to be working in IE7.

function PopUpCentered(sender, eventArgs) {

var popUp = eventArgs.get_popUp();

var popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUppopUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

var windowWidth = document.body.offsetWidth;

if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px

popUp.style.position = "fixed";

popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";

popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";

}

Can anyone suggest workqorund for this?
Is this code works for anyone?

answered on 25 Mar 2010, 02:42 PM

    
            Here is my grid declaration. 

            <telerik:RadGrid ID="grdProducts" runat="server" Style="margin-bottom: 0px" GridLines="None" 
        
                    OnItemDataBound="grdProducts_ItemDataBound" BorderStyle="Solid" AllowSorting="True" 
        
                    AllowPaging="True" PagerStyle-AlwaysVisible="true" PageSize="50" PagerStyle-Position="TopAndBottom"  OnNeedDataSource="grdProducts_NeedDataSource" 
        
                    AllowFilteringByColumn="true" OnItemCommand="grdProducts_ItemCommand">  
        
                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="Id" CommandItemDisplay="Top" 
        
                        Edode="PopUp" CommandItemSettings-AddNewRecordText="Add New  Product">  
        
                        <CommandItemTemplate> 
        
                            <table class="rgCommandTable" border="0" style="width: 100%;">  
        
                                <tr> 
        
                                    <td align="left">  
        
                                        <asp:LinkButton ID="lbAddGridItem" runat="server" CommandName="InitInsert">  
        
                                            <img id="imgInsert" runat="server" class="RADGridHeaderSpacer" alt="" src="~/Images/AddRecord.gif" />Add  
        
                                            New  Product</asp:LinkButton> 
        
                                    </td> 
        
                                    <td align="right">  
        
                                        <asp:LinkButton ID="lbRefreshGrid" runat="server" CommandName="RebindGridReset">  
        
                                            <img id="imgBind" runat="server" class="RADGridHeaderSpacer" alt="" src="~/Images/Refresh.gif" />Refresh</asp:LinkButton> 
        
                                    </td> 
        
                                </tr> 
        
                            </table> 
        
                        </CommandItemTemplate> 
        
                        <RowIndicatorColumn> 
        
                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </RowIndicatorColumn> 
        
                        <ExpandCollapseColumn> 
        
                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </ExpandCollapseColumn> 
        
                        <Columns> 
        
                            <telerik:GridTemplateColumn ForceExtractValue="None" Groupable="False" HeaderButtonType="TextButton" 
        
                                HeaderText="Item #" Reorderable="False" Resizable="False" AllowFiltering="false" 
        
                                UniqueName="ItemNumberColumn">  
        
                                <ItemTemplate> 
        
                                    <asp:Label ID="lblRowNumber" runat="server"></asp:Label> 
        
                                </ItemTemplate> 
        
                                <ItemStyle Width="30px" /> 
        
                                <HeaderStyle Width="30px" /> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridEditCommandColumn> 
        
                            </telerik:GridEditCommandColumn> 
        
                            <telerik:GridBoundColumn DataField="PartnerId" HeaderText=" Partner ID" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" SortExpression="PartnerId" 
        
                                UniqueName="PartnerId">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Name" HeaderText=" Product Name" SortExpression="Name" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="Name">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Id" HeaderText=" Product ID" SortExpression="Id" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="Id">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="Description">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridTemplateColumn ForceExtractValue="None" Groupable="False" HeaderButtonType="TextButton" 
        
                                HeaderText="Insert User" Reorderable="False" Resizable="True" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="InsertUserColumn">  
        
                                <ItemTemplate> 
        
                                    <asp:Label ID="lblInsertDate" runat="server" Text='<%#  String.Format( "{0:d}", DataBinder.Eval(Container.DataItem, "InsertDate")) %>' /><br /> 
        
                                    <asp:Label ID="lblInsertUser" runat="server" Text='<%# GetUserLogonID( String.Format( "{0}", DataBinder.Eval(Container.DataItem, "InsertUser"))) %>' /> 
        
                                </ItemTemplate> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridTemplateColumn ForceExtractValue="None" Groupable="False" HeaderButtonType="TextButton" 
        
                                HeaderText="Edit User" Reorderable="False" Resizable="True" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="EditUserColumn">  
        
                                <ItemTemplate> 
        
                                    <asp:Label ID="lblEditDate" runat="server" Text='<%#  String.Format( "{0:d}", DataBinder.Eval(Container.DataItem, "EditDate")) %>' /><br /> 
        
                                    <asp:Label ID="lblEditUser" runat="server" Text='<%# GetUserLogonID( String.Format( "{0}", DataBinder.Eval(Container.DataItem, "EditUser"))) %>' /> 
        
                                </ItemTemplate> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridTemplateColumn ForceExtractValue="None" Groupable="False" HeaderButtonType="TextButton" 
        
                                HeaderText="Void User" Reorderable="False" Resizable="True" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" 
        
                                UniqueName="VoidUserColumn">  
        
                                <ItemTemplate> 
        
                                    <asp:Label ID="lblVoidDate" runat="server" Text='<%#  String.Format( "{0:d}", DataBinder.Eval(Container.DataItem, "VoidDate")) %>' /><br /> 
        
                                    <asp:Label ID="lblVoidUser" runat="server" Text='<%# GetUserLogonID( String.Format( "{0}", DataBinder.Eval(Container.DataItem, "VoidUser"))) %>' /> 
        
                                </ItemTemplate> 
        
                            </telerik:GridTemplateColumn> 
        
                            <telerik:GridTemplateColumn ForceExtractValue="None" Groupable="False" HeaderButtonType="TextButton" 
        
                                AllowFiltering="false" HeaderText="Status" Reorderable="False" Resizable="True" 
        
                                SortExpression="Void" UniqueName="VoidImageColumn">  
        
                                <ItemTemplate> 
        
                                    <asp:Image ID="imgVoid" runat="server" Height="16" ImageUrl="~/images/Active.png" 
        
                                        ToolTip="Active" Width="16"></asp:Image> 
        
                                    <asp:HiddenField Visible="false" ID="hdnVoid" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Void")%>' /> 
        
                                </ItemTemplate> 
        
                            </telerik:GridTemplateColumn> 
        
                        </Columns> 
        
                        <EditFormSettings UserControlName="~/Controls/Product.ascx" EditFormType="WebUserControl" PopUpSettings-Modal="true">  
        
                        </EditFormSettings> 
        
                    </MasterTableView> 
        
                    <ClientSettings> 
        
                        <ClientEvents OnPopUpShowing="PopUpShowing" /> 
        
                        <Selecting AllowRowSelect="false" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid> 
        
            </div>

answered on 30 Mar 2010, 03:04 PM

Hello Jyothi,

I checked the provided code and here are my findings:
- The method for centering the grid popup is called PopUpCentered but the handler of the grid OnPopUpShowing event is called PopUpShowing. So you might be receiving a javascript error that the PopUpShowing is undefined and this error to be the reason the popup not to display.
- Also in the PopUpCentered event you have defined popUppopUpWidth and popUppopUpHeight variables. But instead of using them later, you are using the undefined variables popUpHeight and popUpWidth which also would throw a javascript error.

Therefore I suggest that you modify your code as below and see if it makes any difference:

<script type="text/javascript">

function PopUpCentered(sender, eventArgs) {

var popUp = eventArgs.get_popUp();

var popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUppopUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

var windowWidth = document.body.offsetWidth;

if (popUppopUpHeight == "") popUppopUpHeight = 300; // if the height isn't set on the popup, default to 300px

popUp.style.position = "fixed";

popUp.style.left = (Math.floor((windowWidth - popUppopUpWidth) / 2)).toString() + "px";

popUp.style.top = (Math.floor((windowHeight - popUppopUpHeight) / 2)).toString() + "px";

}

</script>

<ClientSettings>

<ClientEvents OnPopUpShowing="PopUpCentered" />

<Selecting AllowRowSelect="false" />

</ClientSettings>

Let me know how it goes.

Regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 03 Jun 2010, 06:16 PM

I figured if anyone else comes looking here is a Code i have taking from all the above and some more searching to properly handle in various browsers.

As stated above people had issues when their were scrollbars etc. And some of the code above worked if i was scrolled but didnt if i was already at the top.

So here is my JS code for somewhat centering the Popupwindow. It doesnt always Center Perfectly in different browser but makes sure its visible no matter where you are on the page top, middle, bottom etc..

If you have any issue please reply and let me know and i will try to resolve them.

TESTED IN: IE6,7,8 / FireFox / Chrome / Safari(Windows Version) / Opera

    
            var popUp;  
        
                function PopUpCentered(sender, eventArgs) {  
        
                    var popUp = eventArgs.get_popUp();  
        
                    // SINCE SCROLLBARS MAY BE PRESENT WE NEED TO ADJUST FOR THEM  
        
                    // IF WE ARE AT THE TOP WE NEED TO GET THE VISIBLE HEIGHT & WIDTH  
        
                    // ELSE THE ENTIRE WINDOW  
        
                    var windowHeight = 0;  
        
                    var windowWidth = 0;  
        
                    if (typeof (window.innerWidth) == 'number')   
        
                    {  
        
                        //Non-IE  
        
                        windowWidth = window.innerWidth;  
        
                        windowHeight = window.innerHeight;  
        
                    }  
        
                    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))   
        
                    {  
        
                        //IE 6+ in 'standards compliant mode'  
        
                        windowWidth = document.documentElement.clientWidth;  
        
                        windowHeight = document.documentElement.clientHeight;  
        
                    }  
        
                    else if (document.body && (document.body.clientWidth || document.body.clientHeight))   
        
                    {  
        
                        //IE 4 compatible  
        
                        windowWidth = document.body.clientWidth;  
        
                        windowHeight = document.body.clientHeight;  
        
                    }  
        
                    // GET POP-UP WINDOW HEIGHT AND WIDTH  
        
                    var popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));  
        
                    var popUppopUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));  
        
                    // CHECK IF USING DYNAMIC HEIGHT  
        
                    if (popUppopUpHeight == "")   
        
                    {  
        
                        popUppopUpHeight = 300; // if the height isn't set on the popup, default to 300px  
        
                    }  
        
                    // BREAKING DOWN THE FORMULA FOR EASIER UNDERSTAND  
        
                    // WE TAKE THE WINDOWS HEIGHT AND WIDTH SUBTRACT   
        
                    // THE POP WINDOWS HEIGHT AND WIDTH AND DIVIDE BY 2   
        
                    // TO PLACE IN THE CENTER  
        
                    var popUpLeft = ((windowWidth - popUppopUpWidth) / 2);  
        
                    var popUpTop = ((windowHeight - popUppopUpHeight) / 2);  
        
                    // SINCE WE DIVIDE WE NEED TO ROUND INCASE WE GET A   
        
                    // DECIMAL LIKE 392.5px  
        
                    popUpLeft = Math.floor(popUpLeft);  
        
                    popUpTop = Math.floor(popUpTop);  
        
                    // REALIGN THE WINDOW TO THE CENTER OF THE SCREEN BASED ON CURRENT POSITION  
        
                    popUp.style.position = "fixed";  
        
                    popUp.style.left = popUpLeft;  
        
                    popUp.style.top = popUpTop;  
        
                }

answered on 11 Jan 2011, 06:20 AM

NoPopup.PNG

Hi,

I am using the previous code and it works perfectly in IE but in Firefox and Chrome it never shows me the Popup insert form. Attached is a screenshot of what happens. The modal panel is rendered but no window appears. If I remove the previous code the window appears so the problem is the code or something else related to it. What do you think is the problem?

Regards,
Manuel

PS: My grid is inside a web user control (I don't know if that has something to do with it).

answered on 12 Sep 2012, 07:31 PM

The code below works beautifully to launch the pop-up centered in the window the first time. However, if I close the pop-up and try to reopen it, I get the following javascript error:
Error: TypeError: Sys.Res is undefined
Source File: http://ajax.microsoft.com/ajax/4.0/2/MicrosoftAjax.debug.js
Line: 271

Any thoughts?

function PopUpShowing(sender, eventArgs) {

var popUp = eventArgs.get_popUp();

var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

var windowWidth = document.body.offsetWidth;

if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px

popUp.style.position = "fixed";

popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";

popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";

}

answered on 12 Sep 2012, 08:45 PM

David,

In the course of ripping things down so you can reproduce it, I stumbled a bit closer to the answer. If I remove the RadToolTipManager from the user control, the problem disappears. That's not something we can do in production (the editor is quite complicated and the ToolTips are very important to the end users). Below are the containing page and the user control, both heavily stripped out for simplicity.

Default.aspx:

<%@ Page language="c#" Title="Event Management" EnableViewState="true" %>

<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

private void Page_Load()

{

}

private void rgEvents_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("eventid", typeof(int));

dt.Rows.Add(12);

rgEvents.DataSource = dt;

}

// This method handles/overrides commands sent from the grid

private void rgEvents_ItemCommand(object sender, GridCommandEventArgs e)

{

switch (e.CommandName)

{

case "Delete":

e.Item.Selected = false;

e.Item.Edit = false;

break;

case "Participants":

rwCommands.NavigateUrl = "Participants.aspx?i=" + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex].GetString("eventid");

rwCommands.AutoSize = true;

rwCommands.VisibleOnPageLoad = true;

rwCommands.DestroyOnClose = true;

break;

default:

rwCommands.VisibleOnPageLoad = false;

break;

}

protected void rgEvents_PreRender(object sender, EventArgs e)

{

if (rgEvents.MasterTableView.IsItemInserted)

{

GridEditFormInsertItem editItem = (GridEditFormInsertItem)rgEvents.MasterTableView.GetInsertItem();

UserControl userControl = (UserControl)editItem.FindControl(GridEditFormItem.EditFormUserControlID);

}

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

<TELERIK:RadGrid runat="server" ID="rgEvents" AutoGenerateColumns="false" Visible="true" PageSize="20"

AllowPaging="true" OnItemCommand="rgEvents_ItemCommand" OnPreRender="rgEvents_PreRender"

OnNeedDataSource="rgEvents_NeedDataSource" HeaderStyle-HorizontalAlign="Center" ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing">

<MasterTableView DataKeyNames="eventid" AllowPaging="true" CommandItemDisplay="Top" EditMode="PopUp" AllowAutomaticInserts="false" AllowAutomaticUpdates="false">

<CommandItemSettings AddNewRecordText="Add new event" />

<EditFormSettings EditFormType="WebUserControl" UserControlName="EventEditor.ascx">

<PopUpSettings Width="700" CloseButtonToolTip="Cancel" />

<EditColumn UniqueName="EditColumn" />

</EditFormSettings>

<Columns>

<TELERIK:GridBoundColumn DataField="eventid" HeaderText="ID" />

</Columns>

</MasterTableView>

</TELERIK:RadGrid>

<TELERIK:RadAjaxManager runat="server" id="ramManager" DefaultLoadingPanelID="LoadingPanel" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback">

<AjaxSettings>

<TELERIK:AjaxSetting AjaxControlID="rgEvents">

<UpdatedControls>

<TELERIK:AjaxUpdatedControl ControlID="rgEvents" />

<TELERIK:AjaxUpdatedControl ControlID="rwmManager" />

<TELERIK:AjaxUpdatedControl ControlID="Notification" />

</UpdatedControls>

</TELERIK:AjaxSetting>

</AjaxSettings>

</TELERIK:RadAjaxManager>

<TELERIK:RadAjaxLoadingPanel runat="server" ID="LoadingPanel" />

<TELERIK:RadWindowManager runat="server" ID="rwmManager" Modal="true" ShowContentDuringLoad="false"

Behaviors="Close,Move,Resize" KeepInScreenBounds="true" VisibleStatusbar="false">

<Windows>

<TELERIK:RadWindow runat="server" NavigateUrl="/" ID="rwCommands" ReloadOnShow="true" />

</Windows>

</TELERIK:RadWindowManager>

<TELERIK:RadScriptBlock ID="RadScriptBlock1" runat="server" Visible="true">

<script type="text/javascript">

//On insert and update buttons click temporarily disables ajax to perform upload actions

function conditionalPostback(e, sender) {

var theRegexp = new RegExp("\.btnSubmit$", "ig");

if (sender.EventTarget.match(theRegexp)) {

sender.EnableAjax = false;

}

function PopUpShowing(sender, eventArgs) {

var popUp = eventArgs.get_popUp();

var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

var windowWidth = document.body.offsetWidth;

if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px

popUp.style.position = "fixed";

popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";

popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";

}

</script>

</TELERIK:RadScriptBlock>

</asp:Content>

EventEditor.ascx:

<%@ Control Language="c#" EnableViewState="True" ClassName="EventEditor" AutoEventWireup="true" %>

<%@ Import Namespace="System.Collections.Generic" %>

<%@ Import Namespace="System.Security.AccessControl" %>

<script runat="server">

public int EventId

{

get

{

return lbEventId.Text.ParseNullableInt32() ?? -1;

}

set

{

lbEventId.Text = value < -1 ? "New Event" : value.ToString();

}

private object _dataItem = null;

public object DataItem

{

get { return _dataItem; }

set

{

_dataItem = value;

try

{

EventId = Convert.ToInt32(DataBinder.Eval(DataItem, "eventid"));

}

catch { }

}

private void Page_Load()

{

LoadEvent();

}

private void LoadEvent()

{

if (EventId < 1) return;

}

</script>

<style type="text/css">

.cblRoles td

{

padding: 0 !important;

}

</style>

<div style="margin: 20px;">

<asp:PlaceHolder runat="server" ID="phTopForm">

<table class="style1">

<tr>

<th>

Event ID:

</th>

<td>

<asp:Label runat="server" ID="lbEventId" Text='<%# (Container is GridEditFormInsertItem) ? "New Event" : EventId.ToString() %>' />

</td>

</tr>

</table>

</asp:PlaceHolder>

<div style="text-align: right; margin: 10px;">

<asp:Button ID="btnClose" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />

</div>

<TELERIK:RadAjaxManagerProxy runat="server" ID="ram">

<AjaxSettings>

<TELERIK:AjaxSetting AjaxControlID="btnCancel">

<UpdatedControls>

<TELERIK:AjaxUpdatedControl ControlID="Notification" />

<TELERIK:AjaxUpdatedControl ControlID="RadToolTipManager1" />

</UpdatedControls>

</TELERIK:AjaxSetting>

</AjaxSettings>

</TELERIK:RadAjaxManagerProxy>

<TELERIK:RadScriptBlock runat="server" Visible="true">

<script type="text/javascript">

</script>

</TELERIK:RadScriptBlock>

<TELERIK:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="false" Width="300"

Position="MiddleLeft" Visible="true" RelativeTo="Element">

<TargetControls>

<TELERIK:ToolTipTargetControl TargetControlID="ttTitle" IsClientID="true" />

</TargetControls>

</TELERIK:RadToolTipManager>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Popup window Location?

35 Answers, 1 is accepted