How to manually show and hide loading or spinning image?

[AngryBill]

Hi,

Instead of default datasource config/method to load remote data, I am using a custom function to load data and I like to manually show and hide the Grid spinner image.  Is there a way to do this?

Thanks, 

[Dimo]

Hello,

Now you have the ability to call

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

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

// $element is a jQuery object. The element must have a position:relative style applied

Regards,
Dimo
Telerik

[Philip]

Thanks Dimo, works great!

[Jacques]

This new approach worked for me. Thanks. 

[Mark]

Hi Dimo,
I was trying to work this out.  I have an input which is a Kendo UI dropdown.  This is the Html it creates.

If I try to call the progress using the Id it doesn't work.  

How would I find the jQuery $element object for the dropdown? Or do I have to create my own wrapper $element?

Regards,
Mark

<div class="editor-field">
    <span class="k-widget k-dropdown k-header s-dropdown" 
        unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" 
        tabindex="0" aria-owns="TradingTermId_listbox" aria-disabled="false" aria-readonly="false" 
        aria-busy="false" aria-activedescendant="TradingTermId_option_selected" style="">
            <span unselectable="on" class="k-dropdown-wrap k-state-default">
                <span unselectable="on" class="k-input">Select...</span>
                <span unselectable="on" class="k-select">
                    <span unselectable="on" class="k-icon k-i-arrow-s">select</span>
                </span>
            </span>
        <input class="s-dropdown" data-val="true" data-val-number="The field TradingTermId must be a number." id="TradingTermId" name="TradingTermId" type="text" data-role="dropdownlist" style="display: none;"></span>
</div>

[Dimo]

Hello Mark,

There are two reasons why the DropDownList <input> is not a valid choice for an argument of the kendo.ui.progress method: 

- it has a display:none style, as seen in the HTML snippet
- it cannot have child elements

More information is available on the page below. We will also add the above clarifications to prevent similar confusion in the future.

http://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress

The widget's wrapper could be used as a method argument, but it is too small, and more importantly, it is a <span> element, so it cannot contain <div> elements (such as the loading overlay). That's why some parent element will be a better choice (e.g the div.editor-field).

http://docs.telerik.com/kendo-ui/framework/widgets/wrapper-element

Regards,
Dimo
Telerik

 

 

[John]

Dimo,

I am trying to implement your solution and having problems. Here's a snippet of my code, any suggestions?

function ddlStatus_OnSelect(element) {

    kendo.ui.progress(element.sender.element, true);

    var loanFeeId = element.sender.element.attr("loanFeeId");
    var dataItem = this.dataItem(element.item.index());
    var statusId = dataItem.Value;

    var url = "WorkQueue/Index_UpdateStatus";

    $.post(url,
    {
        loanFeeId: loanFeeId,
        statusId: statusId
    }).fail(function (jqXhr) {

        var errorMessage = jqXhr.statusText;
    }).always(function (jqXhr) {

        kendo.ui.progress(element.sender.element, false);
    });
}

[Dimo]

Hello John,

Did you read my previous reply, which is exactly above your post? It explains why kendo.ui.progress() cannot be used with the DropDownList widget element.

Let me know if there is anything unclear.

Regards,
Dimo
Telerik

 

 

[John]

Yes thank you.

[Trent Jones]

doesn't the dropdown control have it's own mini spinner when loading items from ajax call?  

[Dimo]

Hello Trent,

Yes, it has:

http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource

It appears automatically when the widget's dataSource makes a remote request. You can test this by executing the following code in the browser's console:

$("#products").data("kendoDropDownList").dataSource.read();

In John's case there is a custom Ajax request done manually, so it requires showing the loading indicator manually as well (on a side note, I am not aware why the loading indicator needs to be displayed exactly over the DropDownList).

Regards,
Dimo
Telerik

 

 

[Helpdesk]

I would think that you can show and hide the progress using the ajaxStart and ajaxComplete.  Is there a reason why this does not work

    $(document).ajaxStart(function () {
        alert("ajaxStart");
        kendo.ui.progress($("#grid"), true);
    });

    $(document).ajaxComplete(function () {
        alert("ajaxComplete");
        kendo.ui.progress($("#grid"), false);
    });

With this being the grid info:
    @(Html.Kendo().Grid<SomeModel>()
        .Name("grid")

.....

        .DataSource(dataSource => dataSource
        .Ajax()
        .Events(e => { e.Error("onError"); })
            .Model(model => model.Id(p => p.Entity_ID))
            .Batch(true)
            .Update(up => up.Action("Update_Model", "FiscalProject", new { fiscalProjectId = @ViewBag.FiscalProjectId }))

Thanks in advance

[Helpdesk]

Never mind.  The grid was longer than could fit on one screen, so the icon was being displayed but not visible on screen.  I changed the position of the icon and problem was resolved.

[Domenico]

I was wondering, even ListView is not a valid argument for kendo.ui.progress ?
I'm leaning toward this answer since looking at the html of the widget, adding a child element could ruin the internal disposition of elements but wanted a confirmation

[Dimo]

Hi Domenico,

The kendo.ui.progress() method will work with every jQuery-wrapped DOM element, which meest the requirements listed in the documentation:

http://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress

The ListView wrapper has a position:relative style applied by default, so I don't see a reason why it will not work with the Kendo UI loading indicator.

Let me know if you have additional questions.

Regards,
Dimo
Telerik

[Domenico]

Sorry, tried it on my code but it didn't work. I tried now on the demo online and it worked, probably wasn't referencing the correct div, ty for the time 

[Bridge24]

Hi Dimo. I already posted it in the "dropdownlist" forum, but it's exactly in the subject discussed here.

I try to user ui.progress() on the dropdown.  If I try to lock the "body", it works.  If I try to lock the "wrapper" of my generated combo, the animation is displayed where I want, but the dropdown is not "locked", I can open it when the animation over it is running.

If I set the progress to the div containing the dropdown, it locks the whole body!

Can the "click" be disabled in the case #1, (lock the dropdown) when the animation is displayed over it?

http://jsfiddle.net/mhtg8pge/4/

 

[Dimo]

Hello Daniel,

Case #3 will work if you apply a position style to the #lockdiv1 <div>, as explained in the documentation.

Case #1 will work if you prevent some events, which are propagated from the loading overlay to the ComboBox wrapper. It is important to keep in mind that the loading indicator is placed inside the element passed to the progress() method.

kendo.ui.progress(ui.combo1.wrapper, true);

ui.combo1.wrapper.find(".k-loading-mask").on("click mousedown", false);

Please avoid posting duplicate forum posts and/or support tickets, thank you.

Regards,
Dimo
Telerik

[Carey]

I'm finding that regardless of the method used to display the loading indicator, it really only seems to work well in Firefox. In both Chrome and IE, when loading/reloading the grid the screen displays the current view (be it a grid or another page) until the ajax is complete, then the new grid view instantaneously appears. This can be anywhere between 1-10 seconds, depending on the amount of data being returned. 

Is there a trick to get this to work in other browsers than Firefox? I know this has to do with how different browsers deal with threading and displaying screens, but I can't be the only person frustrated by this aspect of the grids.

I tried both using the grids built in spinner to one I manually appended to the body...no luck!

 

[Carey]

I wanted to follow up and say this spinner issue was being caused by async being set to false for all ajax requests. I believe there were some "race" issues coming up and instead of using event delegation with the ajax calls async was just set so that none of them would run concurrently. Not the right answer, but I guess it worked at the time. 

[Dimo]

Hello Curtis,

OK, thanks, I am glad that you have discovered the cause of the issue.

Regards,
Dimo
Telerik

 

 

[balazs]

Hi Dimo,

Since there are a lot of negative answers, to make it short:

Kendo's DROPDOWN list widget has a spinner when used with data-source!

How can we achieve the same spinner (same position) via JS code? There must be a way - here's the proof: http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource

Thanx.

[Dimo]

Hi Balazs,

The default arrow icon inside the DropDownList is displayed thanks to the k-i-arrow-s class:

<span class="k-widget k-dropdown k-header">
  <span class="k-dropdown-wrap k-state-default"><span class="k-input">Chai</span>
    <span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span>
  </span>
  <input id="products" style="width: 100%; display: none;">
</span>

If you replace the above class with k-loading, the animated loading icon will be displayed.

Regards,
Dimo
Telerik

 

 

[Clint]

What is the Angular JS version of this?

Do I have to resort to using jQuery?

[Dimo]

Hello Clint,

I am afraid there is no built-in Angular way to achieve the discussed customization. The loading icon needs to be displayed programmatically.

Regards,
Dimo
Telerik by Progress

[Clint]

No problem. So how do I programmatically display the loading icon, with Angular?

[Dimo]

Hello Clint,

The loading icon in the DropDownList can be displayed via standard DOM manipulation. There is nothing Angular-specific in this technique - you can utilize jQuery selectors and methods, or vanilla JavaScript expressions.


+ for Kendo UI versions 2017.1.# and newer - replace the "k-i-arrow-60-down" CSS class with "k-i-loading"

<span class="k-widget k-dropdown k-header">
  <span class="k-dropdown-wrap k-state-default"><span class="k-input">Chai</span>
    <span class="k-select"><span class="k-icon k-i-arrow-60-down">select</span></span>
  </span>
  <input id="products" style="width: 100%; display: none;">
</span>

+ for Kendo UI versions 2016.3.# and older - replace the "k-i-arrow-s" CSS class with "k-i-loading"

<span class="k-widget k-dropdown k-header">
  <span class="k-dropdown-wrap k-state-default"><span class="k-input">Chai</span>
    <span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span>
  </span>
  <input id="products" style="width: 100%; display: none;">
</span>

Regards,
Dimo
Telerik by Progress

[Ronnie]

Hey Dimo, Is it possible to have a call to kendo.ui.progress() to use the new skeleton loader for a grid instead of the default one? I have a grid that is configured to use one,  but when i pass the grid using this call it still uses the old loader. 

[Georgi Denchev]

Hello, Ronnie,

The kendo.ui.progress is a simple method to renders a div overlay that is applied to the specified element. The Skeleton is an entirely separate widget. The following demo showcases how you can integrate the Skeleton with the Grid:

https://demos.telerik.com/kendo-ui/skeletoncontainer/grid-integration 

Best Regards,

Georgi

[balazs]

Thanx. Good to know.

Also got the info from support, that if there's a data source to the dropdown, the loading icon can be activated by calling:

widget.dataSource.trigger("requestStart");

and deactivating by calling:

widget.refresh();​

[Daniel]

that is super clean, thanks for sharing the info!

[Dimo]

Hi Bill,

Yes, you can inject the following DOM fragment inside the Grid's div.k-grid-content element and remove it when no longer needed.

<div class="k-loading-mask" style="width:100%;height:100%"><span class="k-loading-text">Loading...</span><div class="k-loading-image"><div class="k-loading-color"></div></div></div>

Greetings,
Dimo
the Telerik team

[Trent Jones]

I am wanting to try this idea, but don't see the k-content div.

[Luc]

I solved it with a modest plugin by extending the kendo ui  progress implementation

!function ($) {    
    $.extend($.fn, {
        busyIndicator: function (c) {
            b = $(this);
            var d = b.find(".k-loading-mask");
            c ? d.length || (d = $("<div class='k-loading-mask'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'/><div class='k-loading-color'/></div>").width(b.outerWidth()).height(b.outerHeight()).prependTo(b)) : d && d.remove()
        }        
    });
}(jQuery);

$("my element").busyIndicator(true); // show
$("my element").busyIndicator(false); // hide

This is by no means something new, thanks to kendo ui i just extended the functionality to use
the computed height and width of the select dom element so as to show the overlay with the correct height-width.

[Trent Jones]

I did it this way:
spinner: function (show) {
            return this.each(function () {
                var $this = $(this);
                if (show) {
                    $this.prepend("<div class='k-loading-mask' style='width:100%;height:100%'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'><div class='k-loading-color'></div></div></div>");
                } else {
                    $this.find("div.k-loading-mask").remove();
                }
            });
        }

where spinner is a method on a plugin called gridEnhancements.
$("#myGrid").gridEnhancements("spinner",true);

[Philip]

Trent .. I have tried using your method, but the indicator is not displayed. Do you have a simple example project you could post? Thanks!

[Trent Jones]

In my example:
var $this = $(this);

this = $(#someGrid").data("kendoGrid");