Angular and Kendo Window

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 29 Mar 2021 06:55 by ADMIN

Kjartan Valur

Created on: 04 Jan 2016 11:11

Category: Window

Type: Feature Request

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

7 comments

ADMIN

Nencho

Posted on: 29 Mar 2021 06:55

Hello, All,

As we are in the final year of Google's support towards AngularJS and the fact there wasn't much activity in this thread - we are declining the item.

Regards,
Nencho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

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.

OpkeyDev

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