Popup window Location?

36 posts, 1 answers
  1. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 19 Jan 2009 Link to this post

    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
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jan 2009 Link to this post

    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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 20 Jan 2009 Link to this post

    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. 
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jan 2009 Link to this post

    Hi Michael,

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

    Shinu
  6. Steve Newbery
    Steve Newbery avatar
    103 posts
    Member since:
    Apr 2005

    Posted 28 Jan 2009 Link to this post

    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 
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 28 Jan 2009 Link to this post

    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.
  8. Steve Newbery
    Steve Newbery avatar
    103 posts
    Member since:
    Apr 2005

    Posted 28 Jan 2009 Link to this post

    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
  9. Steve Y
    Steve Y avatar
    115 posts
    Member since:
    Sep 2008

    Posted 28 Jan 2009 Link to this post

    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.
  10. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 30 Jan 2009 Link to this post

    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.
  11. Steve Y
    Steve Y avatar
    115 posts
    Member since:
    Sep 2008

    Posted 30 Jan 2009 Link to this post

    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
  12. Ed
    Ed avatar
    1 posts
    Member since:
    Nov 2008

    Posted 12 Feb 2009 Link to this post

    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;  
        }  
     

     

     

  13. Cyrus
    Cyrus avatar
    52 posts
    Member since:
    Apr 2008

    Posted 24 Feb 2009 Link to this post

    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).
  14. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 25 Feb 2009 Link to this post

    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.
  15. Sean
    Sean avatar
    15 posts
    Member since:
    Sep 2008

    Posted 13 Jul 2009 Link to this post

    Is there a way to set the height location = the location of the row that was clicked to open it.
  16. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 14 Jul 2009 Link to this post

    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.
  17. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 14 Nov 2009 Link to this post

    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.
  18. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Nov 2009 Link to this post

    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.
  19. bemara57
    bemara57 avatar
    57 posts
    Member since:
    Mar 2008

    Posted 13 Feb 2010 Link to this post

    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"
            } 

  20. Jyothi Nattava
    Jyothi Nattava avatar
    7 posts
    Member since:
    Jul 2009

    Posted 22 Mar 2010 Link to this post

    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?

  21. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 25 Mar 2010 Link to this post

    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.
  22. Jyothi Nattava
    Jyothi Nattava avatar
    7 posts
    Member since:
    Jul 2009

    Posted 25 Mar 2010 Link to this post

    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> 
  23. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 30 Mar 2010 Link to this post

    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.
  24. Loren Dorez
    Loren Dorez avatar
    3 posts
    Member since:
    Apr 2010

    Posted 03 Jun 2010 Link to this post

    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;  
        }    
     
  25. Manuel Ortiz
    Manuel Ortiz avatar
    68 posts
    Member since:
    Aug 2009

    Posted 11 Jan 2011 Link to this post

    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).

  26. David Beck
    David Beck avatar
    38 posts
    Member since:
    Jun 2010

    Posted 11 Jan 2011 Link to this post

    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();
  27. Manuel Ortiz
    Manuel Ortiz avatar
    68 posts
    Member since:
    Aug 2009

    Posted 11 Jan 2011 Link to this post

    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
  28. David Beck
    David Beck avatar
    38 posts
    Member since:
    Jun 2010

    Posted 11 Jan 2011 Link to this post

    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 :)
  29. Manuel Ortiz
    Manuel Ortiz avatar
    68 posts
    Member since:
    Aug 2009

    Posted 11 Jan 2011 Link to this post

    My versions are:

    IE - 8.0.7600.16385
    FF - 3.5.15
    Chrome - 8.0.552.224

    Thanks,
    Manuel
  30. Prashant
    Prashant avatar
    7 posts
    Member since:
    Jun 2011

    Posted 29 Jun 2011 Link to this post

    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

  31. David Beck
    David Beck avatar
    38 posts
    Member since:
    Jun 2010

    Posted 29 Jun 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017