Under Review
Last Updated: 26 Dec 2018 09:38 by ADMIN
Kjartan Valur
Created on: 04 Jan 2016 11:11
Category: Window
Type: Feature Request
59
Angular and Kendo Window
It would be really nice to have an easy way to dynamically create Kendo Windows in AngularJS. And also with separate controller and template.

https://github.com/kjartanvalur/angular-kendo-window

Here i´m trying to do this but it would be really good to have a similar way integrated into Kendo. There is also a demo on the repo.

http://plnkr.co/edit/6lyrblMhZ5ofuonmGoPZ?p=preview
6 comments
ADMIN
Joana
Posted on: 26 Dec 2018 09:36
Hello Yogesh,

The issue stems from a change in jQuery version 3 where Deferred objects are no longer thenable. The change is introduced to fulfill consistency with the ECMAScript Promise specification. You could read more details in the below ECMAScript spec and in the following statement by jQuery:

http://ecma-international.org/ecma-262/8.0/#sec-promise-resolve-functions

https://github.com/jquery/jquery/issues/4040#issuecomment-385476632

So, let me go through the code to make my point clear. If you open you angular-kendo-window.js, you will find a modalRender deferred object which takes the deferred's promise and chains a then statement. However, in jQuery 3, all chains made in the $modal.open and the following modalRender will not be handled asynchronously.

var modalRenderDeferObj = $q.defer();
// Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready.
// In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template.
attrs.$observe('modalRender', function (value) {
    if (value == 'true') {
          modalRenderDeferObj.resolve();
    }
});
modalRenderDeferObj.promise.then(function () {

You could easily verify the above, by adding a timeout in the modalRender to make sure that the other promises have finished:

attrs.$observe('modalRender', function (value) {
     if (value == 'true') {
          setTimeout(function () {
              modalRenderDeferObj.resolve();
          },100)
     }
});

So, in order to use jQuery 3, you should revise the promise chaining in your project.

As for the Kendo UI Window, we are not aware of any issues in jQuery 3.

Regards,
Joana
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Yogesh
Posted on: 21 Dec 2018 11:19

Hi Team , 

  I am using your angular kendo window js , it works cool on older version jquery 2.1.0 and now when I updated to jquery 3.3.1 , it has stopped working and error on console TypeError: Cannot read property 'open' of undefined I am sharing you the link for clarification with this attachment. Kindly solve this issue, it will be a great help.

http://plnkr.co/edit/DMoEN8fpL5acsnPRKQ6b?p=preview

Kjartan Valur
Posted on: 14 Jun 2018 09:39
See angular Material. That´s really nice to seperate dialogs wih separate component and template

https://material.angular.io/components/dialog/overview

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});
Mongonv
Posted on: 17 Jan 2016 21:14
This component works really well and seems to be pretty stable and it makes dealing with windows with Kendo MUCH easier.  Only issue we ran into was the the Kendo UI v2015.2.805 version caused the option values to be ignored.  Updating to anything after 1015.3 seems to work fine.
ADMIN
Telerik Admin
Posted on: 07 Jan 2016 15:31
Thanks for the proposal and for the reference to your implementation, Kjartan. We'll have it in mind when developing the Angular 2 integration for our Kendo UI window widget.
Kjartan Valur
Posted on: 04 Jan 2016 11:14
Here is another similar suggestion but not with angular.

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/2398891-dynamically-creating-kendo-windows