Display loader or progress when tab loading

7 posts, 1 answers
  1. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 11 Dec 2013 Link to this post

    Hi,

    I must be missing something straight-forward. I have a mix of static and ajax loaded (both via contentUrls and manually loading data via ajax) tab content. What I want to do is display a loader where the tab content will be while the tab content is loading. I have tried adding a loader in the contentElement from the select event handler - but, that prevents contentUrls from working because kendo skips loading the tab is there is content in the contentElement.

    How can I display some custom content (like progress ui) in the tab content while a tab is being loaded?
    Additionally, how can I know when to stop the loading/progress ui when a tab is displayed (since contentLoad event is not fired unless ajax content was retrieved)?

    Thanks for any advice.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Dec 2013 Link to this post

    Hello Josh,

    Here is a simple example, which shows how to use kendo.ui.progress() to show and hide the classic animated loading animation over the TabStrip when switching tabs.

    http://docs.kendoui.com/api/web/ui#methods-progress


    function showLoading(e) {
        var tabstrip = e.sender;
     
        window.setTimeout(function(){
            kendo.ui.progress(tabstrip.element, true);
        });
    }
     
    function hideLoading(e) {
        var tabstrip = e.sender;
     
        window.setTimeout(function(){
            kendo.ui.progress(tabstrip.element, false);
        });
    }
     
    $(document).ready(function () {
        $("#TabstripID").kendoTabStrip({
            animation: false,
            select: showLoading,
            contentLoaded: hideLoading,
            activate: hideLoading,
            contentUrls: [ /*...*/ ]
        });
    });

    Don't forget to set position:relative for the TabStrip <div>:

    #TabstripID {
      positionrelative;
    }



    Regards,
    Dimo
    Telerik
    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. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 13 Dec 2013 Link to this post

    Thanks for the example Dimo. It partially answers my questions. I still have the issue where I would like to display a loader "where the tab content will be". Meaning, not overlaying the tabs themselves, but rather the tab contentElement. Is that possible?
  5. Answer
    Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 14 Dec 2013 Link to this post

    Hi Joushua,

    The content element is displayed in the Ajax request's complete event, so displaying the loading indicator over it is currently unfortunately not possible.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2015 in reply to Josh Link to this post

    Hello

    Is this possible in the latest kendo version?

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Jun 2015 Link to this post

    Hello Luis,

    No. Please display the loading indicator over something else, e.g. the whole TabStrip.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Metal
    Metal avatar
    3 posts
    Member since:
    Jan 2016

    Posted 15 Feb Link to this post

    Hi,

     

    I don't know if is possible in the latest version, but my solution is add:

     

    $(document).on({
            ajaxStart: function() {
                //alert('Inicio');
                var $div = $('<div id = "cargando" class="modall"></div>');
                $("body").append($div);
                $("#cargando").show().css('display', 'block');
            },
            ajaxStop: function() {
                $("#cargando").show().css('display', 'none');
                $('#cargando').remove();
                //alert('Fin');
            }
        });

    All this before line:

     

    app.keepActiveState = function _keepActiveState(item) {...

     

    I know that is a poor solution, but is something :P

     

    regreets...

     

    Pd: excuse me my bad english...

Back to Top
Kendo UI is VS 2017 Ready