Kendo Window + Angular JS Position Problem

4 posts, 0 answers
  1. Dominique
    Dominique avatar
    5 posts
    Member since:
    May 2017

    Posted 17 Jul Link to this post

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

  2. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 18 Jul Link to this post

    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.
  3. Dominique
    Dominique avatar
    5 posts
    Member since:
    May 2017

    Posted 20 Jul Link to this post

    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!

     

  4. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 21 Jul Link to this post

    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.
Back to Top