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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overlay on tabContent with spinner and message

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 12:27 PM UTC

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.

Warning Icon 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.Close Icon

;