Kendo Spinner Over Window

6 posts, 1 answers
  1. Marc
    Marc avatar
    146 posts
    Member since:
    Sep 2016

    Posted 13 Dec 2016 Link to this post

    Hi, I have a Kendo spinner shown over a window component, however, when the window has a lot of content and has a vertical scrollbar, the spinner only covers the original size of the window and not the scrolled content. Is there an easy fix?
  2. Stefan
    Admin
    Stefan avatar
    665 posts

    Posted 15 Dec 2016 Link to this post

    Hello Marc,

    I made a Dojo example which is showing a loading icon over the Window, and it is working as expected if the Window is already scrolled:

    http://dojo.telerik.com/OjivE

    If the desired result is to scroll the loading icon together with the content, this is currently not supported from the Kendo UI Window. This is because this will involve destroying the icon in one position and recreating it on scroll which depending on scrolling time can result in a performance issue.

    Let me know if you need additional information on this matter.

    Regards,
    Stefan
    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.
  3. Marc
    Marc avatar
    146 posts
    Member since:
    Sep 2016

    Posted 15 Dec 2016 in reply to Stefan Link to this post

    Hey,

    In your example, the spinner is shown above the window yes, but when I scroll the window, the loading spinner isn't visible (I dont care about the actual icon) but I can select text when the window is scrolled, which defeats the point of the loading spinner.

  4. Stefan
    Admin
    Stefan avatar
    665 posts

    Posted 19 Dec 2016 Link to this post

    Hello Marc,

    After testing the scenario using buttons I was able to reproduce it.

    In this scenario, I can suggest two approaches which can be helpful:

    1) Apply the progress widget to the window wrapper instead of applying it to its element. Please have in mind that this will disable the whole window, not only its content.

    2) The other option is to take the height of the window(visible + hidden) and manually set the height of the div with class k-loading-image.

    Let me know if additional assistance is needed on this matter.   

    Regards,
    Stefan
    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. Marc
    Marc avatar
    146 posts
    Member since:
    Sep 2016

    Posted 19 Dec 2016 in reply to Stefan Link to this post

    Hey Stefan,

    Thanks for investigating this!

    I think the idea of "loading" over the wrapper is my preferred option. If my window is called marcsWindow, I assume I can just do $('#marcsWindow').wrapper.attr("id") to get the Id?

  6. Answer
    Stefan
    Admin
    Stefan avatar
    665 posts

    Posted 20 Dec 2016 Link to this post

    Hello Marc,

    I modified the example from a previous reply to demonstrate how to apply the loading icon over the Window wrapper element:

    http://dojo.telerik.com/ONIfE

    Regards,
    Stefan
    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