This is a migrated thread and some comments may be shown as answers.

Kendo Window + Angular JS Position Problem

3 Answers 205 Views
Window
This is a migrated thread and some comments may be shown as answers.
Dominique
Top achievements
Rank 1
Dominique asked on 17 Jul 2017, 10:15 AM

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();
        };

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 Jul 2017, 10:26 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dominique
Top achievements
Rank 1
answered on 20 Jul 2017, 10:28 AM

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!

 

0
Dimitar
Telerik team
answered on 21 Jul 2017, 07:24 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Dominique
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Dominique
Top achievements
Rank 1
Share this question
or