Centering UserControl in EditFormsettings

[Scott]

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?

[Attila Antal]

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

[Scott]

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?

[Attila Antal]

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