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

Kendo Spinner Over Window

5 Answers 740 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 13 Dec 2016, 10:55 AM
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

Sort by
0
Stefan
Telerik team
answered on 15 Dec 2016, 08:09 AM
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.
0
Marc
Top achievements
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
Stefan
Telerik team
answered on 19 Dec 2016, 07:25 AM
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.
0
Marc
Top achievements
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
Stefan
Telerik team
answered on 20 Dec 2016, 01:35 PM
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.
Tags
General Discussions
Asked by
Marc
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marc
Top achievements
Rank 1
Share this question
or