This is a migrated thread and some comments may be shown as answers.

jQuery 3.x support

11 Answers 322 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 19 Sep 2016, 03:32 PM

Is there a timeline as to when Kendo UI will support jQuery 3.x?

Thanks

marc

11 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Sep 2016, 10:24 AM
Hi Marc,

At the moment jQuery 3 is not supported due to breaking changes that were introduced with it and until they are not resolved it will be hard to provide a firm estimate when it will become supported.

Until than you can always check the supported jQuery versions here.


Best regards,
Rumen
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Carl Nelson
Top achievements
Rank 1
answered on 30 Dec 2016, 02:50 AM

Supposedly, the latest release is compatible with 3.x, though Telerik seems to imply that you need to install jQuery.Migrate to deal with some remaining incompatibilities. However, I have found that Kendo Window() still does not work with 3.1.1, even with the Migrate library. $("#window").data("kendoWindow") always returns "undefined" under 3.1.1, though it works perfectly under 2.1.4. Are you guys aware of this and have a workaround?

 

Thanks,

Carl

 

0
Alex Gyoshev
Telerik team
answered on 02 Jan 2017, 09:15 AM

Hello Carl,

The window works with jQuery 3.1.1, no workaround needed. See this Dojo snippet. Can you provide more details how the problem occurs, in a runnable snippet?

Regards,
Alex Gyoshev
Telerik by Progress
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.
0
Carl Nelson
Top achievements
Rank 1
answered on 03 Jan 2017, 12:53 AM

Hi, Alex.

 

Okay, after looking over your code, I made a change to mine. I am using the MVC wrappers. After my Window() code, I have a script tag that calls an external .js file in which I have a javascript class where I access the Window object using the data() call and then do things like call resize(). It works perfectly in jQuery 2.2.4. In 3.1.1, the data() call in the external .js file fails. So I wrapped the call to the .js file in a $(document).ready() function. Now everything works fine.

 

I do understand how the $(document).ready() defers calls until the object is completed, etc. What I don't understand is why it worked without it under 2.x but requires it under 3.x.

 

Thanks,

Carl

 

0
Niko
Telerik team
answered on 04 Jan 2017, 09:05 AM

Hello Carl,

In jQuery 3 the document ready handlers are asynchronous. This is the reason for the different behavior between the versions.

As you have correctly observed (also check this article), the widgets for the  wrappers are initialized in a document ready handler. As a result all code outside of such a handler will be executed before that. Therefore if you need to execute some code after the widgets are initialized, then you have to wrap it in a document ready handler.

We will make sure this information is added to the documentation for an easier reference. Thank you for your help in figuring out the problem.

Regards,

Niko
Telerik by Progress
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.
0
Carl Nelson
Top achievements
Rank 1
answered on 04 Jan 2017, 07:26 PM

I have found that if I use the Resize action method, I don' t have to use $(document).ready():

.Events(actions => actions.Resize(handler: "resizeWindow"))

...

this.kendoWindow = this.reportWindow.data("kendoWindow");

var parentHeight = this.reportViewerFrameContainer.parents('.k-content').height(); var titleBarHeight = this.reportViewerFrameContainer.find('.k-window-titlebar').outerHeight();

this.kendoWindow.setOptions( {

width: "100%",

height: parentHeight - titleBarHeight - this.windowPaddingBottom

});

 

However, the window first appears and then resizes. Though it is a split second, it is kind of annoying. I have tried adding Visible: false to the Kendo().Window() setup and then adding visible: true to the setOptions, but that doesn't work. I've tried calling open(), I've tried calling attr('style', 'visible:inline-block;'), all kinds of things, but nothing I've tried will make the window visible if it is initially not visible, and I haven't found a way to hide it while it is being resized.

 

So I have two questions: is using Resize() just as good as using $(document).ready()? And how can I resize without the resizing being visible?

 

Thanks,

Carl

 

 

0
Carl Nelson
Top achievements
Rank 1
answered on 04 Jan 2017, 07:29 PM
In fact, with Visible: false set, the Resize action handler never gets called.
0
Carl Nelson
Top achievements
Rank 1
answered on 04 Jan 2017, 07:30 PM
In fact, with Visible: false set, the Resize action handler never gets called.
0
Niko
Telerik team
answered on 05 Jan 2017, 11:57 AM

Hello Carl,

Every widget event is triggered through the widget reference. This way you can be absolutely sure that the widget is initialized.

A better option would be to handle the Open event of the window. In there you can set the size using the setOptions method, as you have mentioned.

Animations on the window could cause flickering. Please, make sure that there are no animations when resizing the window.

I have attached a sample view that you can try out on your side. There I use the Open event to change the initial size of the window. Then using a button you can set random size of the window.

Hope this helps you. Please, let me know if you need further help.

Regards,
Niko
Telerik by Progress
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.
0
Carl Nelson
Top achievements
Rank 1
answered on 05 Jan 2017, 05:03 PM

Hi, Niko.

 

Thank you so much for your help. I added the Open() action and it did solve the visual issue. I was not using animation.

 

I still have to call the Resize() action to handle resizing after the initialize opening, but I am not seeing the flickering anymore. Problem solved.

 

If you are curious, the reason I still have to call resize is that I allow the user to maximize the window such that it "breaks out" of a Kendo tabstrip and takes up the entire viewing area of the browser, which includes a horizontal Kendo menu. By the default, it ends up with the menu writing over the Kendo window. So as part of the resize event I call code to change the z-order so that the menu is under the window, essentially hiding it. If you know of a better solution, please let me know. Thanks.

 

0
Niko
Telerik team
answered on 06 Jan 2017, 11:14 AM

Hello Carl,

The resize event is the perfect solution for that scenario. 

I am glad that the open event helped.

Regards,
Niko
Telerik by Progress
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.
Tags
General Discussions
Asked by
Marc
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Carl Nelson
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Niko
Telerik team
Share this question
or