How to manually show and hide loading or spinning image?

30 posts, 0 answers
  1. AngryBill
    AngryBill avatar
    2 posts
    Member since:
    Apr 2009

    Posted 17 Jan 2012 Link to this post

    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, 
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 26 Oct 2012 Link to this post

    I am wanting to try this idea, but don't see the k-content div.
  5. Luc
    Luc avatar
    12 posts
    Member since:
    Dec 2007

    Posted 09 Nov 2012 Link to this post

    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.

  6. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 09 Nov 2012 Link to this post

    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);

  7. Philip
    Philip avatar
    3 posts
    Member since:
    Oct 2012

    Posted 15 Jul 2013 Link to this post

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

    Posted 16 Jul 2013 Link to this post

    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!
  9. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 16 Jul 2013 Link to this post

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

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

  10. Philip
    Philip avatar
    3 posts
    Member since:
    Oct 2012

    Posted 29 Jul 2013 Link to this post

    Thanks Dimo, works great!
  11. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 09 Dec 2013 Link to this post

    This new approach worked for me. Thanks. 
  12. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2013

    Posted 24 Sep 2014 in reply to Dimo Link to this post

    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>

  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Sep 2014 Link to this post

    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!
     
  14. John
    John avatar
    7 posts
    Member since:
    Jul 2014

    Posted 30 Oct 2014 in reply to Dimo Link to this post

    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);
        });
    }
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Oct 2014 Link to this post

    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!
     
  16. John
    John avatar
    7 posts
    Member since:
    Jul 2014

    Posted 31 Oct 2014 in reply to Dimo Link to this post

    Yes thank you.
  17. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 31 Oct 2014 in reply to John Link to this post

    doesn't the dropdown control have it's own mini spinner when loading items from ajax call?  
  18. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Oct 2014 Link to this post

    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!
     
  19. Helpdesk
    Helpdesk avatar
    3 posts
    Member since:
    Jan 2015

    Posted 13 Mar 2015 in reply to Dimo Link to this post

    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

  20. Helpdesk
    Helpdesk avatar
    3 posts
    Member since:
    Jan 2015

    Posted 16 Mar 2015 in reply to Helpdesk Link to this post

    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.
  21. Domenico
    Domenico avatar
    2 posts
    Member since:
    Mar 2015

    Posted 24 Mar 2015 Link to this post

    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
  22. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Mar 2015 Link to this post

    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!
  23. Domenico
    Domenico avatar
    2 posts
    Member since:
    Mar 2015

    Posted 25 Mar 2015 in reply to Dimo Link to this post

    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 

  24. Dani
    Dani avatar
    55 posts
    Member since:
    Jan 2009

    Posted 12 May 2015 Link to this post

    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/

     

  25. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 May 2015 Link to this post

    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!
  26. Hunter
    Hunter avatar
    24 posts
    Member since:
    Jan 2014

    Posted 09 Jun 2015 Link to this post

    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!

     

  27. Hunter
    Hunter avatar
    24 posts
    Member since:
    Jan 2014

    Posted 10 Jun 2015 in reply to Hunter Link to this post

    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. 
  28. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Jun 2015 Link to this post

    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!
     
  29. balazs
    balazs avatar
    13 posts
    Member since:
    Dec 2014

    Posted 04 Sep 2015 in reply to Dimo Link to this post

    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.

  30. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Sep 2015 Link to this post

    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!
     
  31. balazs
    balazs avatar
    13 posts
    Member since:
    Dec 2014

    Posted 08 Sep 2015 Link to this post

    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();​

Back to Top
Kendo UI is VS 2017 Ready