Overlay on tabContent with spinner and message

[Me]

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]

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