This is a migrated thread and some comments may be shown as answers.

Display loader or progress when tab loading

6 Answers 1206 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 11 Dec 2013, 02:56 PM
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.

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 12 Dec 2013, 03:47 PM
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!
0
Josh
Top achievements
Rank 1
answered on 13 Dec 2013, 07:49 PM
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?
0
Accepted
Dimo
Telerik team
answered on 14 Dec 2013, 09:40 AM
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!
0
Luis
Top achievements
Rank 1
answered on 17 Jun 2015, 03:19 PM

Hello

Is this possible in the latest kendo version?

0
Dimo
Telerik team
answered on 18 Jun 2015, 11:23 AM
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!
 
0
Guido
Top achievements
Rank 1
answered on 15 Feb 2016, 11:59 PM

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

Tags
TabStrip
Asked by
Josh
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Josh
Top achievements
Rank 1
Luis
Top achievements
Rank 1
Guido
Top achievements
Rank 1
Share this question
or