We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Let the user see something


i have some tabs with ajax-content. But as that Ajax-Content is very intense, I'd like to show the viewer something like a waiting-icon. But I can't put it inside an update-panel (if that would even work) because page1 is standard-content. Is there a solution know/possible?

3 Replies

PO Prince Oliver Syncfusion Team June 19, 2017 11:42 AM UTC

Hi Carsten,   
Thank you for contacting Syncfusion support.   
We can use waiting popup control with tab control and display it when tab contents are being loaded. We have prepared a simple sample as per your requirement, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131013/ze/tabwithwaitingpopup1256650883 
Please refer to the following KB link for showing waiting popup during postback: https://www.syncfusion.com/kb/3721/how-to-show-the-ejwaitingpopup-control-during-postback 

CW Carsten Wuttke June 27, 2017 01:07 PM UTC

Hey Prince,

thx in the first. But I can't put it my use somehow. To be more precise:

I have one page with 3 tabs. The first tab is loaded by default within the page (could be changed if needed). The other two have an URL-Parameter which loads when the tab is selected. Can you follow me and help please?

PO Prince Oliver Syncfusion Team June 28, 2017 12:47 PM UTC

Hi Carsten,    

Thank you for your update. 

In the sample provided previously, we have also added a tab with first tab item loaded by default and another tab item using URL. In order to display waiting popup control we need have used ClientSideOnActive event on tab to fetch the data of the URL instead of giving the URL directly in the URL property of tab item. Kindly refer to the following code snippet. 

    var dataLoaded = false, popupObj; 
    function active() { 
        if (!dataLoaded) {      // To check the ajax data is already loaded or not 
                type: "GET", 
                url: "http://localhost:57773/Content/samplecontent/mvccontent.html", 
                dataType: "html", 
                beforeSend: function () { 
                    if (!popupObj) { 
                            showOnInit: true 
                        });     // Creating the WaitingPopup to the tab content div before Ajax Send. 
                    else { 
                success: function (data) { 
                    setTimeout(function () {                 // Data is retrieved from the local page not from Online. So that, here setTimeOut used to show the WaitingPopup 
                        dataLoaded = true; 
                    }, 3000); 

When the tab item is active, active() method is triggered. There we check if the data is already loaded and created an ajax request to get the contents of the URL. In the ajax beforeSend method we create an waiting popup for the tab item. On the ajax success method, we append the data into the tab item’s content and hide the waiting popup. 

If you have any issues, please provide us a sample replicating your scenario. It will help us provide you solution. 


Live Chat Icon For mobile
Up arrow icon