Kendo Window + Angular JS Position Problem

[Dominique]

Window is okay after the first click at the button and is expected to be at the center of screen but on the next clicks, it doesn't go to the center and goes to other position.

See pictures for reference.

Code Below:

$scope.EditModal;

 $scope.OpenWindow = function ()
        {
            $scope.DlgOptions = {
                width: 1350,
                visible: false,
                draggable: false,
                actions: [    
                    "Close"
                ],
            };

            $scope.EditModal.setOptions($scope.DlgOptions);

            $scope.EditModal.center().open();
        };

[Dimitar]

Hello Dominique,

On the following Dojo example you will find a simple implementation of the Kendo UI Window in AngularJS.

You will notice that I have included the provided code for dynamically changing the Window's configuration options. The modal appears centered on my end after multiple clicks and I have tested this with Edge, Chrome and Firefox. I am also attaching a short screencast to demonstrate the described behavior. 

Can you verify if the Dojo works correctly on your end? In case the issue continues to persist, can you provide a working example, where the issue is reproduced, so that I will be able to inspect it locally and advise you further.

Regards,
Dimitar
Progress Telerik

[Dominique]

Is there any difference with my setup?

My button event click is inside the kendo grid template of a column. This is inside the controller of angular.

$scope.dailyGridOptions = {
            groupable: false,
            pageable: false,
            sortable: true,
            selectable: true,
            //change: gridOnChange(),
            columns: [
            {
                
                template: "<a ng-click='OpenCopyModal()'' title='Copy'><span class='pull-left glyphicon glyphicon-duplicate'></span></a><a ng-click='OpenWindow()'><span  class='pull-right glyphicon glyphicon-pencil'></span></a>",
                
                width: "40px"
            },

 

This is the function:

$scope.EditModal;

        $scope.OpenWindow = function ()  // custom function on click
        {
            $scope.DlgOptions = {
                width: 1350,
                visible: false,
                draggable: false,
                actions: [    
                    "Close"
                ],
            };


            $scope.EditModal.setOptions($scope.DlgOptions);
            //$scope.editWindow.content($location.path());

            $scope.EditModal.center().open();
        };

 

I believe this is the cause on my side. Please advise. Thanks!

 

[Dimitar]

Hello Dominique,

I have updated the Dojo example by following the additional details provided, It now includes a Grid widget with a template column. If you click the "Edit" button, you will notice that the Window is opened and centered correctly. 

You can examine the above implementation and use it as a starting point in your project. In case the issue continues to persist, you can modify the above Dojo, so that the issue faced is reproduced and sent it back to us for a review. 

Regards,
Dimitar
Progress Telerik