Display loading spinner when loading DropDownList?

[BitShift]

Have a set of DropDownLists in a ViewComponent and work fine as is, but how can I display a loading spinner if the process takes a second or two?
Its the 2nd DDL that loads via Ajax which I would like to have the progress indicator display, even if just for a fraction of a second.
I seem to notice that the Grid has this enabled by default?  Where are these properties listed?  Do they just default to enabled?
Can one override the image for the spinner?

[BitShift]

I found this in the jQuery forum. 

// show loading indicator
kendo.ui.progress($element, true);

// hide loading indicator
kendo.ui.progress($element, false);

where $element is the object you want to animate

Doesnt seem to work however, as no image or loading indicator is seen

[BitShift]

Seen this thread also,
https://www.telerik.com/forums/how-to-manually-show-and-hide-loading-or-spinning-image#Y_apWF417kKpicdUz0NUHg

So now Im wrapping my DDL within a parent Div, and referencing that, but still no spinner when I am loading the DDL 
Just to be clear, I have 2 DDL's and within an event of the primary, I make an Ajax call to fetch data for the 2nd.
This much works fine, I just need to display a spinner while this process takes place.

[BitShift]

Ok, so I got the spinner to show up...sort of.
So as mentioned, I wrapped my DDL's with a parent div

<div id="BoxWrapper" style="position:relative">
    ... two different Kendo DDL here
<div>

 

Then Im doing this in a event method attached to the 1st DDL

function onBoxSelect(e) {
     kendo.ui.progress($("#BoxWrapper"), true);
     ... go make ajax call here to load DataSource of 2nd DDL, works as expected.
     kendo.ui.progress($("#BoxWrapper"), false);
}

 

So the strange thing is that while Im debugging this in the Chrome dev console, I see a spinner show up ONLY if I have a breakpoint on that first line kendo.ui.progress($("#BoxWrapper"), true);
Othwerwise, I never see it, even though I have a specific delay occuring in the api endpoint that will return data for the 2nd DDL, just to give the spinner time to show up so I can at least know its working.

Help?

[BitShift]

Going to try this approach next, which is probably what I need afterall - something that would block the user from clicking either of the DDL's again until the other finished loading, even if it was just a brief moment.
https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/display-loading-overlay

[BitShift]

Actually, that link I just posted is the same thing Im already doing.  So something related to async/ajax or blocking is preventing the spinner from showing.  Again, if I debug in Chrome, and break on the first line shown below, the spinner shows while I step the rest of the way through and then finally off.  Also, I can manually enter statements in the console window to turn on/off the spinner.

What then could be causing it not to show.  

//show loader
kendo.ui.progress($("#BoxWrapper"), true);

// get data from async function that makes ajax call
GetBoxList(callUrl, input).then( (d) => BoxDS.data(d));

//hide loader
kendo.ui.progress($("#BoxWrapper"), false);

 

[BitShift]

Ok, after realizing I had done this on another project that used Kendo UI jQuery directly, I also did something very similar with using the Window object to show a "loading window" with a progress spinner, I found the example I did.  Looks like that will work for what I need.

 

[Aleksandar]

Hello Randal,

You are correct, to achieve the desired result you could use the Kendo.ui.progress method. You could initiate the display of the loading icon upon calling the Action and disable it once the controller responds with success. This dojo demonstrates a possible implementation where a loading gif is displayed before each subsequent DropDownList is activated. Instead of a timeout you could enable the progress indicator on Action call and disable it on success. As described in the article it is also possible to change the image displayed while loading.

Note that there are several important requirements for the container element, that will be overlaid:

 - it must be visible on the page;
 - it must have non-zero dimensions. If the container can be empty, then min-width and min-height styles may be required.
 - it must have a position style applied with one of the following values: relative, absolute, or fixed;
 - it must be a block element, which allows nesting of div elements (for example div, li, td, dt, dd, section, etc);
 - if the loading overlay should cover the whole page, then it should be displayed over the <body> element, which does not need a position style, but may need a height or min-height style in order to expand and fill the browser viewport. Also, the loading overlay wrapper (div.k-loading-mask) may need a high-enough z-index style in order to cover any other positioned elements with z-index on the page.
 - if the element already contains a progress indicator, a new one will not be created. This is done to avoid multiple loading indicators being displayed at the same time;

All the details are available in the API reference section for the method - https://docs.telerik.com/kendo-ui/api/javascript/ui/ui/methods/progress

I hope this helps. Let me know if you have further questions.

Regards,
Aleksandar
Progress Telerik