kjartanvalur / angular-kendo-window Goto Github PK
View Code? Open in Web Editor NEWAngular Kendo Window
License: MIT License
Angular Kendo Window
License: MIT License
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
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
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.
...
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.
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:
k-window
element rather than just the container of the contentsCan i use kendo window with AngularsJs 1.5x Component?
Like uibModal does? put resolve on bindings { resolve : "<" } of angularjs component.
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.
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
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.
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>
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 ();
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?
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.
Hi,
i am unable to load kendo-editor in angular-kendo-window using latest version of kendo.
kendo version (2015.2.902).
Thanks
Jignesh.
Have you considered adding this package to the npm registry?
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 ?
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';
},
*/
It is not supporting angular js version 1.2.x, Please let me know if there is any workaround.
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 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?
So users can install your package via NPM.
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
Also since this is a SPA, over time you end up with a lot of these DIV's on the page. Is there any way to have it use the existing DIV or to destroy it's self when you close it?
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...
Promise doesnt call nor succes, nor error, nor notify callbacks.
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
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:
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.
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
What is the preferred way to pass back multiple values? Should I just pass back an object as result?
I follow this link: Http://plnkr.co/edit/ZU5kQTD1lEiMhfPmPGVk?p=preview, there is a problem: not found window.html? (AngularJs1.6)
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?
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};
}
}
});
};
}]);
`
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++;
}
};
}
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'm not sure but I could not find a way to modify the options like title, height, templateUrl etc. at runtime. Is it possible?
Doesn't work in strict DI mode, which renders it useless when code is minified.
Check this: http://plnkr.co/edit/b1kcPcGdS6b9uFhEEkmo?p=preview
Kendo switch not work
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.