Display loader or progress when tab loading

[Josh]

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.

[Dimo]

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 {
  position: relative;
}

Regards,
Dimo
Telerik

[Josh]

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?

[Dimo]

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

[Luis]

Hello

Is this possible in the latest kendo version?

[Dimo]

Hello Luis,

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

Regards,
Dimo
Telerik

 

 

[Guido]

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...