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

jQuery 3.x support

11 Answers 437 Views

General Discussions

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

11 Answers, 1 is accepted

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

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.

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

answered on 05 Jan 2017, 11:57 AM

Resize.zip

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.

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.