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?
5 Answers, 1 is accepted
0
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
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.
0
Marc
Top achievements
Rank 1
Rank 1
answered on 15 Dec 2016, 08:21 AM
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.
0
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
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.
0
Marc
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2016, 07:39 AM
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?
0
Accepted
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
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.