How to place EditForm popup center to screen

[Sumanth]

Hi,

I am using FormTemplate of EditFormSettings of Data Grid to add/modify records. I want to place the popup center to screen instead of relative to row/grid. I am using popup as modal popup (PopUpSettings-Modal="true").

Thanks in advance.

Thanks & Regards,
Sumanth

[Princy]

Hello Sumanth,

You can attatch the client event OnPopUpShowing to set the  position of the pop-up accordingly.Please go through the link for more information on this.
Center PopUp edit form in RadGrid

Also go through the following forum ,which explains how can set the pop-up position with respect to the window, 
http://www.telerik.com/community/forums/aspnet-ajax/grid/popup-window-location.aspx#1145064

Thanks,
Princy.

[Sumanth]

Hi Princy,

Thankyou very much.

Regards,
Sumanth

[SSirica]

That works as long as your width and/or height is set in pixels...how do you do it if <PopUpSettings Width="80% /> is a percentage?

[Vessy]

If the popup width is set in percent you can calculate the actual pop width by multiplying the popup percentage size by the size of the Grid.

For example:

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <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 popUpWidthPercent = popUp.style.width.substr(0, popUp.style.width.indexOf("%")) / 100;
                    var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px") / 100);
                    popUp.style.left = ((gridWidth - gridWidth * popUpWidthPercent) / 2 + sender.get_element().offsetLeft).toString() + "px";
                    popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
                }

            </script>
        </telerik:RadCodeBlock>

        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AutoGenerateEditColumn="true"
            runat="server" AllowAutomaticDeletes="True" OnNeedDataSource="RadGrid1_NeedDataSource"
            AllowAutomaticInserts="True" AllowAutomaticUpdates="True"
            AllowSorting="true" Skin="Silk" AllowPaging="true">
            <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="ProductID">
                <EditFormSettings CaptionFormatString="Edit ProductID: {0}" CaptionDataField="ProductID">
                    <%--<PopUpSettings Height="260px" Width="400px" Modal="true" />--%>
                    <PopUpSettings Height="260px" Width="80%" Modal="true" />
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnPopUpShowing="PopUpShowing" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        </telerik:RadGrid>

 

 

[SSirica]

Thank you...that is very cool, but I challenge you to one more scenario if you are up for the challenge.  What if you have no height?  My aspx code is like this:

<EditFormSettings EditFormType="WebUserControl" UserControlName="Controls/ucProvider.ascx">
    <PopUpSettings Width="50%" Modal="True" ScrollBars="Vertical" />
</EditFormSettings>

[Vessy]

Hi SSirica, 

I am afraid that this is not possible. The popup element is still not rendered when the PopUpShowing event is triggered, thus the only way to access its height is if it is set initially.

Optionally, you can base your implementation based on the body element inner height:

            <script type="text/javascript">
                var popUp;
                function PopUpShowing(sender, eventArgs) {
                    popUp = eventArgs.get_popUp();
                    var gridWidth = sender.get_element().offsetWidth;
                    var popUpWidthPercent = popUp.style.width.substr(0, popUp.style.width.indexOf("%")) / 100;
                    popUp.style.left = ((gridWidth - gridWidth * popUpWidthPercent) / 2 + sender.get_element().offsetLeft).toString() + "px";
                    popUp.style.top = ($telerik.$("body").innerHeight() / 2 + sender.get_element().offsetTop).toString() + "px";
                }
            </script>

[SSirica]

I'll give that a try.  Thanks.  

[Vessy]

You are welcome, Steve :)