How to make Edit Popup in browser center not RadGrid

22 posts, 0 answers
  1. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 02 Sep 2012 Link to this post

    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 .
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Sep 2012 Link to this post

    Hello,

    Please check below link.
    Center PopUp Edit Form in RadGrid

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 03 Sep 2012 Link to this post

    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
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 03 Sep 2012 Link to this post

    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
  6. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2012 Link to this post

    Thanks for your answer.
    sorry your code doesn't work well with IE 9.
    kindly help me .
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Sep 2012 Link to this post

    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
  8. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2012 Link to this post

    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
  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 06 Sep 2012 Link to this post

    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.
  10. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 08 Sep 2012 Link to this post

    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 ,


  11. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 12 Sep 2012 Link to this post

    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
  12. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    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.
  13. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 17 Sep 2012 Link to this post

    kindly help me this is urgent issue?
    if this solved or not?
  14. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 17 Sep 2012 Link to this post

    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.
  15. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 17 Sep 2012 Link to this post

    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.
  16. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 19 Sep 2012 Link to this post

    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.
  17. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 21 Sep 2012 Link to this post

    thanks for help.
    kindly look at the attachment pic .
    what happened with chrome and safari !!!!!!!!!!!!!
  18. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 26 Sep 2012 Link to this post

    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.
  19. Ashraf
    Ashraf avatar
    40 posts
    Member since:
    Aug 2012

    Posted 26 Sep 2012 Link to this post

    thanks   Eyup,
    i will try it ,and tell you the result.
  20. Phil
    Phil avatar
    4 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2012 Link to this post

    Eyup,

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

    Thanks!!
  21. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 14 May 2014 Link to this post

    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.
  22. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 19 May 2014 Link to this post

    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.

     
  23. Matej
    Matej avatar
    2 posts
    Member since:
    Jun 2015

    Posted 15 Oct 2015 in reply to Guss Link to this post

    Thank you Guss. It is working for me.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017