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

How to make Edit Popup in browser center not RadGrid

25 Answers 702 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashraf
Top achievements
Rank 2
Ashraf asked on 02 Sep 2012, 02:41 PM
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 .

25 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Sep 2012, 05:01 PM
Hello,

Please check below link.
Center PopUp Edit Form in RadGrid

Thanks,
Jayesh Goyani
0
Ashraf
Top achievements
Rank 2
answered on 03 Sep 2012, 10:23 AM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 03 Sep 2012, 11:28 AM
Hello,

Try with below code snippet.

<script type="text/javascript">
            var popUp;
            function PopUpShowing(sender, eventArgs) {
 
                var myWidth = 0, myHeight = 0;
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                }
               
                popUp = eventArgs.get_popUp();
                var gridWidth = myWidth;
                var gridHeight = myHeight;
                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) +  "px";
                popUp.style.top = ((gridHeight - popUpHeight) / 2) + "px";
            }
 </script>

Let me know if any concern.

Thanks,
Jayesh Goyani
0
Ashraf
Top achievements
Rank 2
answered on 04 Sep 2012, 10:18 AM
Thanks for your answer.
sorry your code doesn't work well with IE 9.
kindly help me .
0
Jayesh Goyani
Top achievements
Rank 2
answered on 04 Sep 2012, 12:23 PM
Hello,

Try with below code snippet.

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

var gridWidth = $(window).width();
var gridHeight = $(window).height();




Thanks,
Jayesh Goyani
0
Ashraf
Top achievements
Rank 2
answered on 04 Sep 2012, 01:14 PM
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
0
Eyup
Telerik team
answered on 06 Sep 2012, 02:12 PM
Hello Ashraf,

Please try the following approach:
 
<ClientEvents OnPopUpShowing="popUpShowing" />
  JavaScript:
function popUpShowing(sender, args) {
    setTimeout(function () {
        var popUp = args.get_popUp();
        var screenSize = $telerik.getViewPortSize();
        popUp.style.top = ((screenSize.height - popUp.offsetHeight) / 2) + "px";
        popUp.style.left = ((screenSize.width - popUp.offsetWidth) / 2) + "px";
    }, 1)
}

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

All the best,
Eyup
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
Ashraf
Top achievements
Rank 2
answered on 08 Sep 2012, 11:16 AM
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 ,


0
Eyup
Telerik team
answered on 12 Sep 2012, 06:25 PM
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
0
Ashraf
Top achievements
Rank 2
answered on 13 Sep 2012, 08:31 AM
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.
0
Ashraf
Top achievements
Rank 2
answered on 17 Sep 2012, 01:05 PM
kindly help me this is urgent issue?
if this solved or not?
0
Eyup
Telerik team
answered on 17 Sep 2012, 01:06 PM
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
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
Ashraf
Top achievements
Rank 2
answered on 17 Sep 2012, 02:00 PM
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.
0
Eyup
Telerik team
answered on 19 Sep 2012, 01:47 PM
Hello Ashraf,

Please add the following to your popUpShowing function:
sender.get_element().scrollIntoView();

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

Kind regards,
Eyup
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
Ashraf
Top achievements
Rank 2
answered on 21 Sep 2012, 02:21 PM
thanks for help.
kindly look at the attachment pic .
what happened with chrome and safari !!!!!!!!!!!!!
0
Eyup
Telerik team
answered on 26 Sep 2012, 08:47 AM
Hello Ashraf,

I am afraid I am not able to reproduce the issue locally, however, I could suggest you an alternative approach:
var gridOffset = $telerik.$("#radgSupAcctFileUploads").offset();
window.scrollTo(gridOffset.top, gridOffset.left);

I hope this will prove helpful.

Regards,
Eyup
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
Ashraf
Top achievements
Rank 2
answered on 26 Sep 2012, 10:02 AM
thanks   Eyup,
i will try it ,and tell you the result.
0
Phil
Top achievements
Rank 1
answered on 15 Oct 2012, 10:46 AM
Eyup,

I just wanted to say your bit of code worked fine for me in chrome and IE.

Thanks!!
0
Guss
Top achievements
Rank 2
Veteran
answered on 14 May 2014, 11:20 AM
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.
0
Eyup
Telerik team
answered on 19 May 2014, 07:22 AM
Hi Guss,

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

Regards,
Eyup
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Matej
Top achievements
Rank 1
answered on 15 Oct 2015, 09:10 PM
Thank you Guss. It is working for me.
0
Celestyn
Top achievements
Rank 1
answered on 02 Mar 2017, 01:37 PM

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.

0
Paul
Top achievements
Rank 1
answered on 19 Apr 2017, 06:42 AM
Works very well C.  Thank you.
0
Eduardo
Top achievements
Rank 1
answered on 09 Nov 2018, 01:24 PM

hello, how can make my insert popup window center like the edit one. the edit show well center but when I open the insert popup show all the way to the left. Also how can I prevent the edit popup show every time the browser refresh?

0
Marin Bratanov
Telerik team
answered on 12 Nov 2018, 06:17 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Ashraf
Top achievements
Rank 2
Answers by
Jayesh Goyani
Top achievements
Rank 2
Ashraf
Top achievements
Rank 2
Eyup
Telerik team
Phil
Top achievements
Rank 1
Guss
Top achievements
Rank 2
Veteran
Matej
Top achievements
Rank 1
Celestyn
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Eduardo
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or