How to manually show and hide loading or spinning image?

5 Answers 11835 Views
Grid
AngryBill
Top achievements
Rank 1
AngryBill asked on 17 Jan 2012, 06:51 PM
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, 

5 Answers, 1 is accepted

Sort by
1
Dimo
Telerik team
answered on 16 Jul 2013, 07:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Philip
Top achievements
Rank 1
commented on 29 Jul 2013, 04:23 PM

Thanks Dimo, works great!
Jacques
Top achievements
Rank 2
commented on 09 Dec 2013, 06:41 AM

This new approach worked for me. Thanks. 
Mark
Top achievements
Rank 1
commented on 25 Sep 2014, 02:50 AM

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
Telerik team
commented on 29 Sep 2014, 01:41 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
John
Top achievements
Rank 2
commented on 30 Oct 2014, 09:28 PM

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
Telerik team
commented on 31 Oct 2014, 12:44 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
John
Top achievements
Rank 2
commented on 31 Oct 2014, 03:13 PM

Yes thank you.
Trent Jones
Top achievements
Rank 1
commented on 31 Oct 2014, 03:16 PM

doesn't the dropdown control have it's own mini spinner when loading items from ajax call?  
Dimo
Telerik team
commented on 31 Oct 2014, 03:51 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Helpdesk
Top achievements
Rank 1
commented on 13 Mar 2015, 07:01 PM

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
Top achievements
Rank 1
commented on 16 Mar 2015, 02:11 PM

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
Top achievements
Rank 1
commented on 24 Mar 2015, 04:18 PM

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
Telerik team
commented on 25 Mar 2015, 06:38 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Domenico
Top achievements
Rank 1
commented on 25 Mar 2015, 08:02 AM

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
Top achievements
Rank 1
Iron
commented on 12 May 2015, 08:31 PM

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
Telerik team
commented on 13 May 2015, 12:18 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Carey
Top achievements
Rank 1
commented on 09 Jun 2015, 10:09 PM

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
Top achievements
Rank 1
commented on 10 Jun 2015, 08:51 PM

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
Telerik team
commented on 11 Jun 2015, 05:49 AM

Hello Curtis,

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
balazs
Top achievements
Rank 2
commented on 04 Sep 2015, 12:32 PM

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
Telerik team
commented on 08 Sep 2015, 03:01 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Clint
Top achievements
Rank 1
Iron
commented on 09 Feb 2017, 07:56 PM

What is the Angular JS version of this?

Do I have to resort to using jQuery?

Dimo
Telerik team
commented on 10 Feb 2017, 08:00 AM

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
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.
Clint
Top achievements
Rank 1
Iron
commented on 10 Feb 2017, 02:06 PM

No problem. So how do I programmatically display the loading icon, with Angular?
Dimo
Telerik team
commented on 13 Feb 2017, 11:24 AM

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
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.
Ronnie
Top achievements
Rank 1
commented on 17 Feb 2022, 06:35 PM

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
Telerik team
commented on 22 Feb 2022, 11:44 AM

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

1
balazs
Top achievements
Rank 2
answered on 08 Sep 2015, 04:20 PM

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
Top achievements
Rank 3
Iron
Iron
Iron
commented on 19 Apr 2022, 07:49 AM

that is super clean, thanks for sharing the info!
0
Dimo
Telerik team
answered on 18 Jan 2012, 09:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Trent Jones
Top achievements
Rank 1
commented on 26 Oct 2012, 08:42 PM

I am wanting to try this idea, but don't see the k-content div.
0
Luc
Top achievements
Rank 1
answered on 09 Nov 2012, 02:55 PM
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.

0
Trent Jones
Top achievements
Rank 1
answered on 09 Nov 2012, 03:03 PM
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
Top achievements
Rank 1
commented on 15 Jul 2013, 09:32 PM

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
Top achievements
Rank 1
commented on 16 Jul 2013, 12:12 PM

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

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

Tags
Grid
Asked by
AngryBill
Top achievements
Rank 1
Answers by
Dimo
Telerik team
balazs
Top achievements
Rank 2
Luc
Top achievements
Rank 1
Trent Jones
Top achievements
Rank 1
Share this question
or