hi, kindly help me  I want to show the popup edit form the center of window what ever the  screen size ,
in the center of any screen .

Hello,

Please check below link.
Center PopUp Edit Form in RadGrid

Thanks,
Jayesh Goyani

Thanks Jayesh Goyani, but this make the popup in radgrid's center , I want to make it in the browser's center with any hight and width

Hello,

Try with below code snippet.


Let me know if any concern.

Thanks,
Jayesh Goyani

Thanks for your answer.
sorry your code doesn't work well with IE 9.
kindly help me .

Hello,

Try with below code snippet.

I have used jquery so do not forget to add jquery reference in your page.





Thanks,
Jayesh Goyani

hi Jayesh Goyani,
 when I minimized the IE the popup not at the center .
my requirements:
  1-when the user click Edit the popup will shown in the center.
  2-if the user minimize the browser's window then click edit  the popup should shown in the center.
  3-with IE-Firfox-Chrome-Safari
  4-maximize screen or minimize it before click Edit
 in all cases the the popup should shown in the center.
kindly help me this is my problem

Hello Ashraf,

Please try the following approach:
    JavaScript:

That should do the trick. Please give it a try and let me know about the result.

All the best,
Eyup
the Telerik team

thanks Eyup ,sorry your code dose't work well,
please i made this task before but with microsof ajax model popup and it works well .
how to implement this with your popup.

<script type="text/javascript" language="javascript">
////////////////centering the popup///////////////////////
function getScreenCenterY() {
var y = 0;

y = getScrollOffset() + (getInnerHeight() / 2);

return (y);
}
//---------------------------------------------------------------------------------------
function getScreenCenterX() {
return (document.body.clientWidth / 2);
}
//---------------------------------------------------------------------------------------
function getInnerHeight() {
var y;
if (self.innerHeight) // all except Explorer
{
y = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
y = document.body.clientHeight;
}
return (y);
}
//---------------------------------------------------------------------------------------
function getScrollOffset() {
var y;
if (self.pageYOffset) // all except Explorer
{
y = self.pageYOffset;
}
else if (document.documentElement &&
document.documentElement.scrollTop)
// Explorer 6 Strict
{
y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
y = document.body.scrollTop;
}
return (y);
}
//---------------------------------------------------------------------------------------
///////////////////end////////////////////////////
function ModalPopupAutoCenter(ElementID, divWidth, divHeight) {
setTimeout(function () {
posY = getScreenCenterY();
posX = (document.body.clientWidth - divWidth) / 2;
posY = posY - (divHeight / 2);
$find(ElementID).set_X(posX);
$find(ElementID).set_Y(posY);
$find(ElementID).show();
}, 100);
}
</script>
 
 //Confrim leaving the current set after click add set
function ConfrimAddingSet(element) {
if (IsConfirmationNeeded) {
if (IsLeaveSetValid) {
return true;
}
else {
var elementID = '<%=atkmpeConfirmChangeSet.BehaviorID %>';
ModalPopupAutoCenter(elementID, 600, 130);
return false;
}
}
else {
return true;
}
} 

 
</script> 
 
<asp:Button ID="wbtnAddCustSet" runat="server" Text="Add New Custom Questions Set"
Style="margin-bottom: 5px;" Height="30" Width="220" OnClick="wbtnAddCustSet_Click"
OnClientClick="return ConfrimAddingSet(this);" /> 
 
<ATK:ModalPopupExtender runat="server" ID="atkmpeConfirmChangeSet" BehaviorID="atkmpeConfirmChangeSetBehavior"
TargetControlID="wbtnConfirmChangeSetPopup" PopupControlID="wpnlConfirmChangeSetBody"
BackgroundCssClass="modalBackground" DropShadow="True" RepositionMode="RepositionOnWindowResizeAndScroll"
CancelControlID="wbtnConfirmChangeSetCancel" OkControlID="wbtnConfirmChangeSetYes"
PopupDragHandleControlID="wpnlConfirmChangeSetHeader" OnOkScript="IsLeaveSetValid = true;$('[id$=wbtnAddCustSet]').click();">
</ATK:ModalPopupExtender>

but i got something like that by jquery

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
//Function to make Edit's RadGrid form in the center
function PopUpShowing(sender, eventArgs) {
popUp = eventArgs.get_popUp(); 
$(popUp).center();}
the code above works fine but when i maximized the browser window , the popup didn't take the left width perfect ,the left width is greater than the center.
kindly help me ,

Hi Ashraf,

Please find the attached web site where I implemented the suggested approach. On my side everything works as expected and the PopUp correctly gets in the center of the window regardless of its size.

On which browsers are you facing the issue? Could you please provide us the steps to reproduce it on our end?

Regards,
Eyup
The Telerik Team

thanks Eyup,
your answer is great  and works well with column bound ,
i use template columns ,your answer doesn't solve the problem :
here is my grid it's very complicated in edit mode :
<telerik:RadGrid ID="radgSupAcctFileUploads" runat="server" AllowFilteringByColumn="True"
            AllowPaging="True" AllowSorting="True" CellSpacing="0" PageSize="50" GridLines="None"
            DataKeyNames="FileID" DataSourceID="odsFileUploads" AutoGenerateColumns="False"
            OnSortCommand="radgSupAcctFileUploads_SortCommand" OnItemDataBound="radgSupAcctFileUploads_ItemDataBound"
            OnItemCommand="radgSupAcctFileUploads_ItemCommand" ShowGroupPanel="True">
            <GroupingSettings ShowUnGroupButton="True" CaseSensitive="false" />
            <ClientSettings AllowColumnsReorder="True" AllowGroupExpandCollapse="true" AllowDragToGroup="True"
                Resizing-AllowColumnResize="true">
                <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                <ClientEvents OnPopUpShowing="PopUpShowing" OnFilterMenuShowing="filterMenuShowing" />
                <Resizing AllowColumnResize="True"></Resizing>
            </ClientSettings>
            <GroupPanel meta:resourcekey="radgSupAcctFileUploadsCreationHeader">
            </GroupPanel>
            <MasterTableView EditMode="PopUp" GroupLoadMode="Client">
                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridTemplateColumn DataField="UploadName" FilterControlAltText="Filter UploadName column"
                        HeaderText="Upload Name" SortExpression="UploadName" UniqueName="UploadName"
                        Groupable="false" DataType="System.String" FilterListOptions="VaryByDataType"
                        meta:resourcekey="radgSupAcctFileUploadsUploadName">
                        <ItemTemplate>
                            <asp:Label ID="UploadNameLabel" runat="server" Text='<%# Eval("UploadName") %>'></asp:Label>
                            <asp:Label ID="wlblFileID" runat="server" Text='<%# Bind("FileID") %>' Style="display: none;"></asp:Label>
                            <asp:Label ID="wlblFullFileURL" runat="server" Text='<%# Bind("FilePath") %>' Style="display: none;"></asp:Label>
                        </ItemTemplate>
                        <HeaderStyle Width="190px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="FileName" FilterControlAltText="Filter FileName column"
                        Groupable="false" DataType="System.String" HeaderText="File Name" SortExpression="FileName"
                        UniqueName="FileName" FilterListOptions="VaryByDataType" meta:resourcekey="radgSupAcctFileUploadsFileName">
                        <ItemTemplate>
                            <asp:HyperLink ID="wlinkFileName" runat="server" Text='<%# Bind("FileName") %>' ToolTip='<%# Bind("FileName") %>'
                                NavigateUrl='<%# Bind("FileURL") %>' Target="_blank" Font-Underline="true"></asp:HyperLink>
                        </ItemTemplate>
                        <HeaderStyle Width="155px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Description" FilterControlAltText="Filter Description column"
                        DataType="System.String" Groupable="false" HeaderText="Description" SortExpression="Description"
                        UniqueName="Description" FilterListOptions="VaryByDataType" meta:resourcekey="radgSupAcctFileUploadsDescription">
                        <ItemTemplate>
                            <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
                        </ItemTemplate>
                        <HeaderStyle Width="230px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridNumericColumn DataField="FileSize" DataType="System.Int32" FilterControlAltText="Filter FileSize column"
                        HeaderText="File Size(KB)" SortExpression="FileSize" UniqueName="FileSize" ReadOnly="true"
                        FilterControlWidth="70" Groupable="false" FilterListOptions="VaryByDataType"
                        meta:resourcekey="radgSupAcctFileUploadsFileSize">
                        <HeaderStyle Width="120px"></HeaderStyle>
                    </telerik:GridNumericColumn>
                    <telerik:GridDateTimeColumn DataField="CreationDate" FilterControlAltText="Filter CreationDate column"
                        HeaderText="Creation Date" SortExpression="CreationDate" DataFormatString="{0:MM/dd/yyyy}"
                        UniqueName="CreationDate" PickerType="DatePicker" EnableRangeFiltering="true"
                        GroupByExpression="CreationDate CreationDate Group By CreationDate" meta:resourcekey="radgSupAcctFileUploadsCreationDate">
                        <HeaderStyle Width="160px" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridTemplateColumn AllowFiltering="false" Groupable="false">
                        <ItemTemplate>
                            <telerik:RadButton ID="wlbtnRename" runat="server" Text="Rename" ButtonType="LinkButton"
                                CommandName="Edit" meta:resourcekey="radgSupAcctFileUploadswlbtnRename">
                                <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="4" PrimaryIconTop="4" />
                            </telerik:RadButton>
                        </ItemTemplate>
                        <HeaderStyle Width="90px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn AllowFiltering="false" Groupable="false">
                        <ItemTemplate>
                            <telerik:RadButton ID="wlbtnEdit" runat="server" Text="Edit" ButtonType="LinkButton"
                                CommandName="Edit" meta:resourcekey="wlbtnEditFileUploadResource">
                                <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="4" PrimaryIconTop="4" />
                            </telerik:RadButton>
                        </ItemTemplate>
                        <HeaderStyle Width="70px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn AllowFiltering="false" Groupable="false">
                        <ItemTemplate>
                            <telerik:RadButton ID="wlbtnDelete" runat="server" OnClick="wbtnDeleteYes_Click"
                                Text="Delete" ButtonType="LinkButton" OnClientClicking="fnconfirmDeleteFile"
                                meta:resourcekey="wlbtnDeleteFileUploadResource">
                                <Icon PrimaryIconCssClass="rbRemove" PrimaryIconLeft="4" PrimaryIconTop="4" />
                            </telerik:RadButton>
                        </ItemTemplate>
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                </Columns>
                <EditFormSettings EditFormType="Template" PopUpSettings-Modal="true">
                    <FormTemplate>
                        <table id="EditTable">
                            <tr>
                                <td>
                                    <asp:Label ID="wlblUploadNameEdit" runat="server" Text="Upload Name" Width="100px"
                                        meta:resourcekey="wlblUploadNameEditResource1"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="RadwxtUploadNameEdit" runat="server" Height="20px" MaxLength="100"
                                        Width="350px" Text='<%# Bind("UploadName") %>'>
                                    </telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ID="wcvReuiredValidNameEdit" runat="server" Display="Dynamic"
                                        ValidationGroup="Edit" SetFocusOnError="True" ControlToValidate="RadwxtUploadNameEdit"></asp:RequiredFieldValidator>
                                    <br />
                                    <asp:CustomValidator ID="wcvValidEditExistUploadName" runat="server" Display="Dynamic"
                                        ValidationGroup="Edit" SetFocusOnError="false" ControlToValidate="RadwxtUploadNameEdit"
                                        ClientValidationFunction="fnCheckUploadNameEdit" OnServerValidate="UploadNameEdit_Validate"
                                        ErrorMessage="An Upload with this name already exists. Please enter a different name."
                                        Font-Bold="true"></asp:CustomValidator>
                                    <asp:Label ID="wlblFileID" runat="server" Text='<%# Bind("FileID") %>' Style="display: none;"></asp:Label>
                                    <asp:Label ID="SupAcctIDLabel" runat="server" Text='<%# Eval("SupAcctID") %>' Style="display: none;"></asp:Label>
                                    <asp:Label ID="lblFileSize" runat="server" Text='<%# Bind("FileSize") %>' Style="display: none"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="wlblFileNameEdit" runat="server" Font-Bold="True" Text="File Name"
                                        meta:resourcekey="wlblFileNameEditResource1"></asp:Label>
                                </td>
                                <td>
                                    <asp:HyperLink ID="wlinkFileName" runat="server" Text='<%# Bind("FileName") %>' ToolTip='<%# Bind("FileName") %>'
                                        NavigateUrl='<%# Bind("FileURL") %>' Target="_blank" Style="margin-left: 5px"></asp:HyperLink>
                                    <asp:Label ID="Label1" runat="server" ForeColor="Red" Font-Bold="True"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="wlblEditDescription" runat="server" Text="Description" meta:resourcekey="wlblEditDescriptionResource1"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="RadDescriptionTextBox" runat="server" Text='<%# Bind("Description") %>'
                                        MaxLength="200" TextMode="MultiLine" Height="30px" Width="350px" ValidationGroup="Edit"
                                        LabelCssClass="" LabelWidth="64px">
                                    </telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" colspan="2">
                                    <asp:Label ID="wlblAllowedReplacedByExtensionAsterix" runat="server" ForeColor="Red"
                                        Font-Bold="True" Text="* "></asp:Label>
                                    <asp:Label ID="wlblAllowedReplacedByExtensionRead" runat="server" Font-Bold="True"
                                        Text="Allowed Extension" meta:resourcekey="wlblAllowedReplacedByExtensionReadResource1"></asp:Label>
                                    <asp:Label ID="wlblAllowedReplacedByExtension" runat="server" ForeColor="Red" Font-Bold="True"
                                        Style="margin-left: 10px; display: inline;"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                    <asp:Label ID="FileSizeLabel" runat="server" Text='<%# Eval("FileSize") %>' Style="display: none"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="wlblUploadFileUpload" runat="server" Text="Upload File" meta:resourcekey="wlblsycUploadFileUploadEditResource1"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadAsyncUpload ID="tlkasycupUpdateSingleFileUpload" runat="server" MultipleFileSelection="Disabled"
                                        MaxFileInputsCount="1" OnClientFilesSelected="fnHideProgreesArea" OnClientValidationFailed="fnOnValidationFailedInUpdateFileUpload">
                                    </telerik:RadAsyncUpload>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="2">
                                    <telerik:RadButton ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        ValidationGroup="Edit" Style="margin-top: 20px" meta:resourcekey="btnUpdateResource1"
                                        OnClientClicking="fnCloseEditPopupWindow">
                                        <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                    </telerik:RadButton>
                                    &nbsp;
                                    <telerik:RadButton ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                        CommandName="Cancel" Style="margin-top: 20px" meta:resourcekey="btnCancelEditFileUploadResource1"
                                        OnClientClicking="fnCloseEditPopupWindow">
                                        <Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                    <PopUpSettings Modal="True" Height="200px" Width="550px"></PopUpSettings>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>
<asp:ObjectDataSource ID="odsFileUploads" runat="server" SelectMethod="GetSupAcctFileUploadBySupAcctID"
            TypeName="Bartizan.LeadsLightning.BusinessLogic.SupAcctFileUploadsBLL" OldValuesParameterFormatString="original_{0}"
            OnSelecting="odsFileUploads_Selecting">
            <SelectParameters>
                <asp:Parameter Name="SupAcctID" Type="Int32" />
                <asp:Parameter Name="PropertyName" Direction="Input" Type="String" />
                <asp:Parameter Name="SortOrder" Type="String" />
            </SelectParameters>
        </asp:ObjectDataSource>
kindly help me to apply your answer with my grid.

kindly help me this is urgent issue?
if this solved or not?

Hi Ashraf,

I have modified the provided code using your RadGrid declaration. Please check out the attached web site and verify that the suggested approach works as expected.

Greetings,
Eyup
the Telerik team

hi thanks for help;
please i have scroll in my page and you set fixed position ,
how to apply your code with my design .
look at the attachment pic.

Hello Ashraf,

Please add the following to your popUpShowing function:

I hope this helps. Give it a try and let me know about the result.

Kind regards,
Eyup
the Telerik team

thanks for help.
kindly look at the attachment pic .
what happened with chrome and safari !!!!!!!!!!!!!

Hello Ashraf,

I am afraid I am not able to reproduce the issue locally, however, I could suggest you an alternative approach:

I hope this will prove helpful.

Regards,
Eyup
the Telerik team

thanks   Eyup,
i will try it ,and tell you the result.

Assuming youhave jquery on your page:

var popUp;
function PopUpShowing(sender, eventArgs) {
    popUp = eventArgs.get_popUp();
    //var gridWidth = sender.get_element().offsetWidth;
    //var gridHeight = sender.get_element().offsetHeight;
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
    var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
    popUp.style.position = "fixed";
    popUp.style.left = Math.floor((viewportWidth - popUpWidth) / 2) + "px";
    popUp.style.top = Math.floor((viewportHeight - popUpHeight) / 2) + "px";
}

Please see the line --> popUp.style.position = "fixed";
This is missing from other solutions. IF the popup block element is relative to the grid, the setting its left and top has not the right effect. By making it "fixed" most of above code (not just mine), starts to behave as expected.

Hi Guss,

Thank you for sharing your specific solution with the community. I hope it helps other developers with similar scenarios.

Regards,
Eyup
Telerik

Thank you Guss. It is working for me.

Thank You Guss.

It is a little old theme, but I slightly improve the solution in case that popup width/height is defined percentage.

 

<script type="text/javascript">
        var popUp;
        function popUpShowing(sender, eventArgs) {
            popUp = eventArgs.get_popUp();
           
            var viewportWidth = $(window).width();
            var viewportHeight = $(window).height();

            var value = popUp.style.width;
            var hasPx = value.indexOf('px') >= 0;
            var hasPct = value.indexOf('%') >= 0;
            var iOf = "px";
            if (hasPct) { iOf = "%" };

            var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf(iOf));
            var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf(iOf));
            popUp.style.position = "fixed";

            if (hasPct) {
                popUp.style.left =  Math.floor(viewportWidth * (100 - popUpWidth) / 200) + "px";
                popUp.style.top = Math.floor(viewportHeight * (100 - popUpHeight) / 200) + "px";
            }
            else {
                popUp.style.left = Math.floor((viewportWidth - popUpWidth) / 2) + "px";
                popUp.style.top = Math.floor((viewportHeight - popUpHeight) / 2) + "px";
            };
            
        }
    </script>

 

Hope it could help.

 

C.

Works very well C.  Thank you.

Hello Eduardo,

The easiest approach I can offer for your questions is to create a separate edit/insert form and open it in a RadWindow, as shown in this demo: https://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window. It satisfies both requirements - will not come up upon a postback and it will be centered.

Regards,
Marin Bratanov
Progress Telerik