25 Answers, 1 is accepted
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
sorry your code doesn't work well with IE 9.
kindly help me .
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
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
Please try the following approach:
<
ClientEvents
OnPopUpShowing
=
"popUpShowing"
/>
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
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 ,
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
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>
<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.
if this solved or not?
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
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.
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
kindly look at the attachment pic .
what happened with chrome and safari !!!!!!!!!!!!!
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
i will try it ,and tell you the result.
I just wanted to say your bit of code worked fine for me in chrome and IE.
Thanks!!
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.
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.
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.
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?
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