Centering UserControl in EditFormsettings

4 posts, 0 answers
  1. Scott
    Scott avatar
    7 posts
    Member since:
    Jun 2016

    Posted 10 May Link to this post

    I have a grid where I am using the EditFormsettings and a user control.  The code looks like the following

     

          <EditFormSettings UserControlName="~/TemplateUserControls/EditControls/GroupEditFormControl.ascx" EditFormType="WebUserControl">
                <EditColumn UniqueName="GroupEditFormControl">
                </EditColumn>
                <PopUpSettings Modal="true" />
            </EditFormSettings>

    I have the client event set to call a javascript function to center the user control

      <ClientSettings>

            <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />
        </ClientSettings>

     

    And the Javascript looks like the following.  

    <script type="text/javascript">
            function onPopUpShowing(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>

     

    The problem is no matter that values go into the Popup.style.left and popup.style.top values, the usercontrol is always in the same location.    I have confirmed that the Javascript is being called by putting a few "alert" calls 

    For a quick test, I hard coded the top and left values (See below) to see if the user control would be at the top part of the screen

    popUp.style.left = "10px";
    popUp.style.top = "10px";

    And the usercontrol's position did not move.

    How can I center the usercontrol when using the editform function under the grid?

  2. Attila Antal
    Admin
    Attila Antal avatar
    376 posts

    Posted 15 May Link to this post

    Hi Scott,

    The reason the pop-up did not center is because the logic for centering it executes to early, before the grid does the adjustments. Once the grid finished loading it will also run a internal logic for adjusting the pop-up.

    You could try applying delay on the logic execution which will be executed after the grid finished loading.

    For example, you could use the setTimeout function for that:

    <script type="text/javascript">
        setTimeout(function () {
            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";
        }, 2000);
    </script>

    The example uses two seconds (2000 millisecond) but you can decrease it to less and test it again.

    Kind Regards,
    Attila Antal
    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.
  3. Scott
    Scott avatar
    7 posts
    Member since:
    Jun 2016

    Posted 03 Jun in reply to Attila Antal Link to this post

    When I use the sample code, the user control appears in the initial position and then 2 seconds later will jump to the center of the screen.  How can the form only show in the centered position.  The initial jump from the starting location to the center of the screen looks odd to the user.  Also on the https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/data-editing/center-popup-edit-form-in-radgrid site, there is no mention of the internal logic or the 2 second wait.  Can the demo be updated?
  4. Attila Antal
    Admin
    Attila Antal avatar
    376 posts

    Posted 04 Jun Link to this post

    Hi Scott,

    The 2 seconds (2000 milliseconds) delay I have shown in the example was only for demonstrating this scenario. You can always try to decrease the number, for example try using 1000, 600, 300, 100, 10 milliseconds, depending which one would work out for you. 

    I would like to note that, loading of the EditForm also depends on the loading time of the controls in the WebUserControl. The more time the UserControl takes to load, the higher delay you will need to apply in the centering logic.

    Also, thank you for pointing out this missing information. We will definitely update the documentation to reflect this scenario.

    As a token of Gratitude for the time and effort you have put into investigating this case, I have update your Telerik points.

    Please try my suggestion of decreasing the delay and see if that will work for you.

    Kind regards,
    Attila Antal
    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.
Back to Top