kjartanvalur / angular-kendo-window Goto Github PK

The latest build of kendo (2016.1.226) appears to break the code.
The error "Cannot read property 'open' of undefined" line 95 of "angular-kendo-window.js" is thrown.
The scope does not contain the property "myKendoWinow". Seems like the directive in the template is not setting the value of myKendoWindow onto the scope. Telerik bug maybe ?

Promise doesnt call nor succes, nor error, nor notify callbacks.

I am trying to tie your directive into an existing angular 1.x app and I can get the window to open with the content message and buttons, but none of the options have any impact. I am able to setup a barebones test app and the options work as expected, but no matter where I put the files and scripts I cannot get the options to work in my existing app.

I have the modal1.html, scripts.js, style.css, and window.html all in the root of the project. If I remove any one of them, the window fails to open, so its seeing the files where they are located. The only thing I have changed in the scripts.js is myApp to app (the value currently defined for the main app.)

The application has multiple controllers, screens, and code and will be growing much bigger, so we need to figure out what the issue is with your component cause we would really like to be able to use it.

Any thoughts on what to try or where to look would be greatly appreciated and thanks for a great component.

Is completely necessary to have the window.html in the site root? I notice that without that file the code fails, but I'm working in MVC.NET and I can't put that file on the root, is there way to specify in the options, the location, otherwise I think that is not a correct behavior.

I would like to use your code in one of my projects. But there is one problem. I can't find a license type and my question is: What is a license for this code? Is it possible to add a licence file?

Thanks

Hello,

I just upgraded to latest kendo version and now I get error about myKendoWindow is undefined in the following code snippet, error is because there is no myKendowWindow on the scope for some reason

modalRenderDeferObj.promise.then(function () {
                    if(scope.options.position === undefined){
                    /*
                        Following line throws the error because
                        myKendowWindow is undefined
                    */
                      scope.myKendoWindow.center(); 
                    }
                    scope.myKendoWindow.open();                    
                    scope.$on($modalStack.NOW_CLOSING_EVENT, function (e, setIsAsync) {
                        scope.done = setIsAsync();
                        scope.myKendoWindow.close();
                    });
                    var modal = $modalStack.getTop();
                    if (modal) {
                        // Notify {@link $modalStack} that modal is rendered.
                        $modalStack.modalRendered(modal.key);
                    }
                });

Thanks
Ketul

I am using Angular JS 1.4x , Angular Material and Kendo Directives...

I am unable to disable Escape(Esc) button functionality, Research a bit but found nothing.

I don't want close the kendo-Window on clicking Esc button from keyboard.

Have you considered adding this package to the npm registry?

Playing with your example here - http://plnkr.co/edit/NILoTF5yVdneHRqQbzdm?p=preview

I tried to change the script.js code into something like below. I have more dependencies in the modalController. I believe everything works as expected but modalController does not get "params" variable injected into it. It is always "undefined". Am I missing something?

`
var MyApp = angular.module('myapp', ["kendo.window", "kendo.directives"]);

MyApp.controller("modalController", ["$scope", function ($scope, params) {

$scope.confirm = function(){
	console.log(params);
};

$scope.cancel = function(){
	console.log(params);
};

}]);

MyApp.controller("mycontroller", ["$scope", "$kWindow", function ($scope, $kWindow) {

$scope.title = "My modal title";

$scope.content = "This is my message to the window!";

$scope.result = "";

$scope.openWindow = function(title, message){
	$kWindow.open({
			options:{
                modal: true,
                title: $scope.title,
                resizable: true,
                height: 150,
                width: 400,
                visible: false
            },
			templateUrl: "modal1.html",
            controller: "modalController",
            resolve: {
				params: function () {
					return {title: title, message: message};
                }
            }
	});
};

}]);
`

I am not sure what the problem is, but when I recreate windows fast (within 1000 ms) there is some sort of controller conflict. I think it's a timeout of 1000ms, where after the controller is destroyed.

When I make the timeout 0ms all is well.

I know that this isn't what an user would do, but while testing I stumbled on this one.

I follow this link: Http://plnkr.co/edit/ZU5kQTD1lEiMhfPmPGVk?p=preview, there is a problem: not found window.html? (AngularJs1.6)

Hello,

For our application we need to dispose resources when the window is closed. Is it possible to react to Kendo Window events inside the Window itself? Otherwise, is it possible to transport, what needs to be disposed of, to the kWindow opener when the cross is clicked at the top right corner?

With kind regards,

Cees van Altena.

I've found this to work quite a bit better and you don't need to upload window.html as well.

Alternatively, with webpack - template: require('window.html')

        template: '<div kendo-window="myKendoWindow" k-options="options" modal-render="{{$isRendered}}" tabindex="-1" role="dialog" >    <div><div k-window-transclude></div></div>  </div>',

        /*
        templateUrl: function (tElement, tAttrs) {
            var windowInstance = $modalStack.getTop().value;
            return windowInstance.windowTemplateUrl || 'window.html';
        },
        */

Hello.
At the close on the cross there is no destruction of the window.
It is necessary to replace the default handler kendo-window yours.

What is the preferred way to pass back multiple values? Should I just pass back an object as result?

...

let windowOptions = {
    options:{
        modal: true,
        title: $scope.config.title,
        resizable: false,
        height: 400,
        width: 400,
        visible: false
    },
    templateUrl: MY_TEMPLATE_KEY,
    controller: controller,
    resolve: {
        decision: function () {
            return $scope.config;
        }
    }
};

let windowInstance = $kWindow.open(windowOptions);
let test = $templateCache.get('MY_TEMPLATE_KEY');
console.log(test); // <div>hello!</div>

windowInstance.result.then(function (result) {
    if (result) {
        $scope.result = 'confirmed!';
        $scope.callback({data: result});
        console.log(result);
    }
    else{
        $scope.result = 'canceled!';
        console.log('canceled!');
    }
});

When the modal open() gets called the templateUrl resolution gets messed up, and the windowTemplateUrl inside your code resolves to undefined. This can't be happenning since if I manually get the template from the $templateCache I get the contents, see commented out part in example.

I'm digging deeper and deeper inside the promise resolution, but it's pretty darn complicated. Any help? I'll continue the debugging.

So users can install your package via NPM.

I discovered this after I have struggled a lot to understand why it is not working at my side.

This module actually contains some directives (uibModalWindow, uibModalTransclude) and one factory ($uibModalStack) that are present in angular-bootstrap module (ui-bootstrap-tpls.js), which I have had already loaded into my app.

I tried to comment the code for these in angular-kendo-window.js file, but I think these "common" parts were rewritten a bit in this module, so I had to comment the code in ui-bootstrap-tpls.js to finally make it work.
I didn't investigated too much the differences, I should try a "diff" software to see exactly.

Was this intended or why wasn't this written with different directive names than angular-bootstrap's?

Can i use kendo window with AngularsJs 1.5x Component?

Like uibModal does? put resolve on bindings { resolve : "<" } of angularjs component.

Hello,
I love your work.

When I do a "bower install", the next pull request is not in it. #38
The pull request I mentioned is really important.

When I look at the releases, the master is 7 commits ahead of the release 2.2.5.
https://github.com/kjartanvalur/angular-kendo-window/releases

This is the result of the bower install. The mismatch seems odd.
-> bower install angular-kendo-window bower angular-kendo-window#* not-cached https://github.com/kjartanvalur/angular-kendo-window.git#* bower angular-kendo-window#* resolve https://github.com/kjartanvalur/angular-kendo-window.git#* bower angular-kendo-window#* download https://github.com/kjartanvalur/angular-kendo-window/archive/v2.2.5.tar.gz bower angular-kendo-window#* extract archive.tar.gz bower angular-kendo-window#* mismatch Version declared in the json (2.2.4) is different than the resolved one (2.2.5) bower angular-kendo-window#* resolved https://github.com/kjartanvalur/angular-kendo-window.git#2.2.5

How can I get the latest version, with #38 in?

Kind regards

hi,we work your angular-kendo-window and modal together,the only problem is z-index of kWindow is 10003(overlay is 10002),thus very bigger than modal's z-index(1050 + index*10).so how we can modify the kWIndow's z-index to smaller than modal's?

Is there a list of all the parameters that can be configured in the options section and possible others?

Is there any documentation or examples on what events can be configured in setting up a window (particularly close)?

The options list seems to be a mix of bootstrap and kendo and adding a close function to the window creation operation does not seem to do anything, so trying to find out what is actually available from the creation operation and how to set them up.

Thanks much for your work
Ed

I'm not sure but I could not find a way to modify the options like title, height, templateUrl etc. at runtime. Is it possible?

Nice work with $kWindow!, I would like to specify path to my window.html file, how would I do that?

Hi,

Do you have any plan to create a bower package?

Thanks,

SayusiAndo

Check this: http://plnkr.co/edit/b1kcPcGdS6b9uFhEEkmo?p=preview

Kendo switch not work

When opens it scrolls page to the top.
Is there workaround?

To see issue in the angular-kendo-window plunk, do the following:

1.) change the window modal property to false
2.) open two new windows
3.) close the first window
4.) open a new window

The new window will reuse the name of the second window opened since the window name is based off of the number of stacked windows (length). One solution would be to introduce a counter variable in $$stackedMap that is used to name the new windows and is incremented so that window names are never reused. something like "nextId" :

     createNew: function () {
          var stack = [];
          var nextId = 0;
          return {
              add: function (key, value) {
                  stack.push({
                      key: key,
                      value: value
                  });
              },
              get: function (key) {
                  for (var i = 0; i < stack.length; i++) {
                      if (key == stack[i].key) {
                          return stack[i];
                      }
                  }
              },
              keys: function () {
                  var keys = [];
                  for (var i = 0; i < stack.length; i++) {
                      keys.push(stack[i].key);
                  }
                  return keys;
              },
              top: function () {
                  return stack[stack.length - 1];
              },
              remove: function (key) {
                  var idx = -1;
                  for (var i = 0; i < stack.length; i++) {
                      if (key == stack[i].key) {
                          idx = i;
                          break;
                      }
                  }
                  return stack.splice(idx, 1)[0];
              },
              removeTop: function () {
                  return stack.splice(stack.length - 1, 1)[0];
              },
              length: function () {
                  return stack.length;
              },
              nextId: function () {
                  return nextId++;
              }
          };
      }

Hi!

We are using this library in a 1.x angular version project. It did not work out of box, until we manually registered a "window.html" object in the $templateCache.

export const WidgetsModule = angular
    .module('widgets', ['kendo.directives', 'kendo.window'])
    .run(($templateCache) => {
        'ngInject';
        $templateCache.put('window.html', require('../../../../../../lib/angular-kendo-window/window.html'));
    })
    .name;

Where window.html's content is the following:

<div kendo-window="myKendoWindow" k-options="options" modal-render="{{$isRendered}}" tabindex="-1" role="dialog" >
    <div><div k-window-transclude></div></div>
</div>

Hi,

  i am unable to load kendo-editor in angular-kendo-window using latest version of kendo.

kendo version (2015.2.902).

Thanks
Jignesh.

Hi,

I cannot update to this version because after you add the file window.html and change the logic, when I open a $kWindow on my project not work properly because it's not center vertically but only horizontally...

Also your plunker example is broken...

Doesn't work in strict DI mode, which renders it useless when code is minified.

http://plnkr.co/edit/0Lz3qkiqtgxlUTz3mCXb?p=preview

It is not supporting angular js version 1.2.x, Please let me know if there is any workaround.

I have a SPA app that I switched from using bootstrap modals to this system so I could use the Kendo Windows with a templateURL and controller.

This issue is every time you open the modal it just adds another Div to the page instead of re using the existing one like the Kendo Window does. In my template I create a Kendo DataTimePicker and set the ID because I have to manipulate the

Hello,

I am trying to capture the close event and prevent window from closing based on some validation rule, following plunker shows http://plnkr.co/edit/EacLulnJbMqUffufjmgn?p=preview that the close event has got the "event" argument but latest version of kWindow that I have does not seem to have any arguments in close event?

Thanks
Ketul

Hello. Another small problem. Alignment window.

Your following code does not work:
                     var kWindow = scope.myKendoWindow.open ();
                     if (scope.options.position === undefined) {
                       kWindow.center ();
                     }
I am using the code:
                     // Todo [Shein]: Fixed alignment window
                     if (scope.options.position === undefined) {
                         scope.myKendoWindow.center ();
                     }
                     scope.myKendoWindow.open ();

I would like to capture the close event from the windows when the the x button is pressed.

I want to ask a confirmation to the user when he have unsaved changes before closing the windows. Is there a way to achieve that?

I tried
$(".k-window").kendoWindow({
close:function(e){
if (!confirm("are you sure?"))
e.preventDefault();
}
})

but it doesn't work. Any idea please?

A great library! Thanks for assembling this code.

A few items I've found using this in my single page app which is resource leak sensitive. Not able to figure out how to fix it as this is beyond my angular skill level. If you register an $on event listener in the controlleras, it's never given an opportunity as $destroy is never called and the controllers seems to persist for the life of the page even after the window is closed (perhaps the $on is holding it in memory?). Using the 'x' on the window. Two potential issues from this:

1. Resource leak with extra 'on' listeners never go away
2. controller stack just grows for each window. I have a large single page app and this is a challenge
3. $windowInstance does not have an id in it. Even the plunker example isn't populating the id.

One of the close methods is called when this occurs so it sees it, just not sure how to get that message all the way through to the controller.

Would also be nice to have the ability to hook into events like resize (which is how I discovered this). Currently I have to hook the kendo resize and then rootscope broadcast and have the target controlleras look for messages with $scope.$id within one as the filter, kendo.window seems to create two controllers back to back when it starts, the one from Kendo? and the one from your injections of the controlleras as registered.

What is the intended effect of the windowClass option? For example:

$kWindow.open({
    // ...
    windowClass: 'my-class',
    // ...
}}

Right now, supplying a class doesn't actually add a css class to the window, as one would expect. Instead, it adds my-class as the value of a window-class attribute that is on the element wrapping the window's contents. See screenshot:

I think that it should:

• add a css class rather than just an attribute, and
• add the css class to the actual k-window element rather than just the container of the contents