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

Popup window Location?

35 Answers 1675 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 19 Jan 2009, 08:44 PM
How is the popup window location determined when editmode is set to popup?  And how can it be changed? 

I've created a simple page with a radgrid using editmode=popup.. The simple page works fine and the popup displays up near the top when edit/insert are clicked.  We moved the code to another page the uses radtabs and put the code under on of the tabs.  When clicking edit the popup edit form displays  but it must be scrolled to.  When clicking insert the popup edit form doesn't even appear.  The grid is using an EditTemplate.  Any ideas how why this is occurring and what can be done to remedy the situation?

I've looked at the documentation and searched on popup location but didn't come up with anything.  Thanks

35 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
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

0
Michael
Top achievements
Rank 1
answered on 20 Jan 2009, 01:07 PM
Thanks for the code. It worked perfectly. I didn't know about that event.  This is our first project with RadControls so I'm learning new things everyday. 
0
Shinu
Top achievements
Rank 2
answered on 21 Jan 2009, 03:51 AM
Hi Michael,

You can also refer the following help article which explains more on this.
Center PopUp edit form in RadGrid

Shinu
0
Steve Newbery
Top achievements
Rank 1
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 
0
Iana Tsolova
Telerik team
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.
0
Steve Newbery
Top achievements
Rank 1
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
0
Steve Y
Top achievements
Rank 2
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.
0
Iana Tsolova
Telerik team
answered on 30 Jan 2009, 02:47 PM
Hi Steve,

Thank you for your suggestion about the popup center property, I will forward it to our developers to consider implementing it.

To Steve Y:
Unfortunately with automatic heights, it is not possible to retrieve the actual popup height OnPopUpShowing as it is not calculated on the client before the popup shows.


Sincerely yours,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Y
Top achievements
Rank 2
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
0
Ed
Top achievements
Rank 1
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;  
    }  
 

 

 

0
Cyrus
Top achievements
Rank 1
answered on 25 Feb 2009, 04:38 AM
Are you going to add a location property soon?  This is really a pain and as you can see there is a lot of extra coding to make this work (not something I want to do...or test).
0
Iana Tsolova
Telerik team
answered on 25 Feb 2009, 07:36 AM

Hi Cyrus,

I will forward your request to our developers and I hope you can find this feature implemented in future versions of RadGrid for ASP.NET AJAX.

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.
0
Sean
Top achievements
Rank 1
answered on 13 Jul 2009, 04:00 PM
Is there a way to set the height location = the location of the row that was clicked to open it.
0
Iana Tsolova
Telerik team
answered on 14 Jul 2009, 09:01 AM
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.
0
jgill
Top achievements
Rank 1
answered on 15 Nov 2009, 03:10 AM
Hello,
I wanted to see if centering the PopUp with windows with automatic heights has been added to a version of RadControls after the posts above were originally made in Q1 2009.
0
Iana Tsolova
Telerik team
answered on 16 Nov 2009, 11:40 AM
Hello jgill,

I am afraid the desired functionality is not built-in for RadGrid. In order to center the grid popup edit form, you need to set its height and width and handle the OnPopUpShowing event as shown here.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
bemara57
Top achievements
Rank 1
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"
        } 

0
Jyothi Nattava
Top achievements
Rank 1
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?

0
Iana Tsolova
Telerik team
answered on 25 Mar 2010, 10:16 AM
Hello jgill,

Could you please share the grid declaration as well?

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Jyothi Nattava
Top achievements
Rank 1
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> 
0
Iana Tsolova
Telerik team
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.
0
Loren Dorez
Top achievements
Rank 1
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;  
    }    
 
0
Manuel Ortiz
Top achievements
Rank 1
answered on 11 Jan 2011, 06:20 AM
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).

0
David Beck
Top achievements
Rank 1
answered on 11 Jan 2011, 04:04 PM
Manuel,

I have just retested in all major browser IE8, FF, Safari and Chrome and it works however my grid and code isnt run from a User Control.

Nothing in the JS calls anything specific for issue.

Because you Grid is in a user control the ID of everything will be tag to start with the User Control ID_GridID... so this line
var popUp = eventArgs.get_popUp();

Might be failing. Can you do an alert right after it like this
alert(popUp);

and post what it returns I'm willing to be Null/Nothing. If so we will have to see about capturing the PopUp manually rather tan the get_popUp();
0
Manuel Ortiz
Top achievements
Rank 1
answered on 11 Jan 2011, 08:30 PM
Hello,

After much trial and error, concatenating the "px" to the popUpLeft and popUpTop vars solved the problem! Strange, but it works!

Thanks for your help,
Manuel
0
David Beck
Top achievements
Rank 1
answered on 11 Jan 2011, 08:37 PM
Manuel,

Well glad to hear its works what version of FF & other browsers are you running

Here are mine

IE - 8.0.7600.16385
FF - 3.6.13
Chrome - 8.0.552.224
Safari - 5.0.3.7533.19.4
Opera - 11.00.1156

If its older version I can test previous version of the browser and if all work with PX added i can add them to my post :)
0
Manuel Ortiz
Top achievements
Rank 1
answered on 11 Jan 2011, 08:50 PM
My versions are:

IE - 8.0.7600.16385
FF - 3.5.15
Chrome - 8.0.552.224

Thanks,
Manuel
0
Prashant
Top achievements
Rank 1
answered on 29 Jun 2011, 11:16 PM
Befo0re trying this script to position your popup, which works very well if your popup is about the same size as the grid. If the popup is much larger, as in my case, you can end up with the top of the popup off of the screen. I made a small modification to check that  popup.style.top is not negative. If it is, I set the pupUpHeight variable to popIpHeight - gridHeight. That seems to work pretty well.

Doug

0
David Beck
Top achievements
Rank 1
answered on 29 Jun 2011, 11:48 PM
Hello Doug,
I see the Issue. You dont really want to take the Grid Height into play because it can be bigger than the window and essential the popup is now hidden behind the window

The real solution is to compare the Pop-up Height to the Available Window Height and if bigger than set it to that height so its essentially full screen.
I will do some testing and hopefully have a new code realse for this in a few days
0
CAM
Top achievements
Rank 1
answered on 19 Feb 2012, 07:46 AM
The last code segment is missing the measurement designation (PX)...this may cause weird popup locations depending on the base measurement designation.  Simply add 'px' to the locators.

                // REALIGN THE WINDOW TO THE CENTER OF THE SCREEN BASED ON CURRENT POSITION  
                popUp.style.position = "fixed";
                popUp.style.left = popUpLeft + 'px';
                popUp.style.top = popUpTop + 'px';
0
Rob
Top achievements
Rank 1
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";
}
0
David Beck
Top achievements
Rank 1
answered on 12 Sep 2012, 08:08 PM
Hi Rob,

I am unable to reproduce this issues. Can you build a small sample app showing this issues and attache it i would be glad to help resolve this issue for you.
0
Rob
Top achievements
Rank 1
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>
</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>
0
Pavlina
Telerik team
answered on 18 Sep 2012, 11:19 AM
Hello,

I suggest you to disable ajax (set the EnableAjax property of RadAjaxManager to false) and see if you receive any server-side error exception. After removing it, you can turn the ajax back on.

Kind regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rob
Top achievements
Rank 1
answered on 18 Sep 2012, 12:21 PM
No errors occur when disabling AJAX. Setting ScriptMode="Release" on the RadScriptManager declaration (suggested in the bug report I filed) does prevent the error from occurring.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Michael
Top achievements
Rank 1
Steve Newbery
Top achievements
Rank 1
Iana Tsolova
Telerik team
Steve Y
Top achievements
Rank 2
Ed
Top achievements
Rank 1
Cyrus
Top achievements
Rank 1
Sean
Top achievements
Rank 1
jgill
Top achievements
Rank 1
bemara57
Top achievements
Rank 1
Jyothi Nattava
Top achievements
Rank 1
Loren Dorez
Top achievements
Rank 1
Manuel Ortiz
Top achievements
Rank 1
David Beck
Top achievements
Rank 1
Prashant
Top achievements
Rank 1
CAM
Top achievements
Rank 1
Rob
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or