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.
Unfortunately, activation email could not send to your email. Please try again.

Overlay on tabContent with spinner and message

Thread ID:

Created:

Updated:

Platform:

Replies:

132031 Aug 9,2017 04:15 AM Aug 10,2017 08:27 AM Angular 1
loading
Tags: ejTab
Me
Asked On August 9, 2017 04:15 AM

Hey,

I would like to be able to programmatically turn on / off overlay on specific tab content with spinner and text. Basically a simple busy indicator with overlay which prevents user for clicking anything in tab while busy. Couldn't find anything in documention, so checked in sample and found - splash. How can I use it for my purpose?

In my sample, as you see problem is that there occurs gap because of 'splash' class. Moreover, I would like to message and spinnger to be shown on top and in center of my content. Well, it's common sense I guess :)

Any tips?

 #myTabPanelContentContainer - is container for @ViewChild with which help I'm adding content.

Source code:
<ej-tab>
<ul><li><a rel='nofollow' href="#myTabPanelContent0">Home</a></li></ul>
<div id="myTabPanelContent0" style="border: none;">     
            <div [ngClass]="{'splash': isOverlayShown}" >
<div *ngIf="isOverlayShown" class="message">Loading... </div>
<div *ngIf="isOverlayShown" class="spinner"></div>
<div [ngClass]="{'myTabAdditionalOverlay': isOverlayShown, 'e-overlay': isOverlayShown}" >
<div #myTabPanelContentContainer></div>
</div>
</div>
</div>
</ej-tab>


Picture:

Prince Oliver [Syncfusion]
Replied On August 10, 2017 08:27 AM

Hi Me,   
   
Thank you for contacting Syncfusion support.   
   
To show a simple busy indicator with overlay which prevents user for clicking anything in tab while busy,use our WaitingPopup Control. Kindly refer to the following UG documentation: https://help.syncfusion.com/angular/waitingpopup/getting-started   
   
Kindly refer to the following code snippet:   
 
<ej-tab> 
    <ul><li><a rel='nofollow' href="#myTabPanelContent0">Home</a></li></ul> 
    <div id="myTabPanelContent0" style="border: none;">      
        <div #myTabPanelContentContainer></div> 
    </div> 
</ej-tab> 
<ej-waitingpopup id="target" target="#myTabPanelContent0" appendTo="#myTabPanelContent0" [showOnInit]="true" text="Loading....." ></ej-waitingpopup>  
 
 
 
We can render the WaitingPopup control and set the target for WaitingPopup control using target property and contain the entire control inside the element which it needs to be displayed using appendTo property. We can add texts to the WaitingPopup using text property.    
  
You can access the show and hide methods in the WaitingPopup control using the control’s instance, which can be used to show the WaitingPopup when tab is busy and hide it when it completes again. Kindly refer to the following code snippet. 

onclick(args){ 
        var obj = this.target.widget.element.ejWaitingPopup("instance");  
        if(args.isChecked == true){ 
            obj.hide(); 
        }else{ 
            obj.show(); 
        } 
    } 


We have prepared a sample for your convenience. Kindly refer to the following sample: http://www.syncfusion.com/downloads/support/forum/132031/ze/Waitinpop-NG21418524960 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;