jQuery 3.x support

12 posts, 0 answers
  1. Marc
    Marc avatar
    27 posts
    Member since:
    Sep 2014

    Posted 19 Sep 2016 Link to this post

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

    Thanks

    marc

  2. Rumen
    Admin
    Rumen avatar
    13004 posts

    Posted 20 Sep 2016 Link to this post

    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.
     
  3. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 29 Dec 2016 in reply to Rumen Link to this post

    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

     

  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 02 Jan Link to this post

    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.
  5. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 02 Jan in reply to Alex Gyoshev Link to this post

    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

     

  6. Niko
    Admin
    Niko avatar
    404 posts

    Posted 04 Jan Link to this post

    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.
  7. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 04 Jan in reply to Niko Link to this post

    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

     

     

  8. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 04 Jan in reply to Carl Nelson Link to this post

    In fact, with Visible: false set, the Resize action handler never gets called.
  9. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 04 Jan in reply to Carl Nelson Link to this post

    In fact, with Visible: false set, the Resize action handler never gets called.
  10. Niko
    Admin
    Niko avatar
    404 posts

    Posted 05 Jan Link to this post

    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.
  11. Carl Nelson
    Carl Nelson avatar
    8 posts
    Member since:
    Nov 2009

    Posted 05 Jan in reply to Niko Link to this post

    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.

     

  12. Niko
    Admin
    Niko avatar
    404 posts

    Posted 06 Jan Link to this post

    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.
Back to Top