Spinner

Question

Hello! When I try use manual spinner I got error. Please help !!! Very need

  @ViewChild(GridComponent) public gridInit: GridComponent;

public ngAfterViewInit() {
        this.grid = this.gridInit;
        if (this.loadingReports) {
            this.grid.showSpinner();
        }
    }

Venkatesh Ayothi Raman · Answer

Hi Ali, Thanks for using Syncfusion products. As from your query, we suspect that do you want dynamically to show or hide spinner in Grid. We went through your code example which you have shared for us and found that you are tried to load the spinner before the Grid element appends to the DOM. This is the cause of this issue, so we suggest you use load event or create an event to show or hide spinner. Please refer to the following code example,

. . .

show(args:any){ this.Grid.showSpinner(); } hide(args:any){ this.Grid.hideSpinner(); } In that above code example, we have shown/hide the spinner by using button click for your reference. We have also prepared a sample for your convenience which can be referred from following link, Sample: https://plnkr.co/edit/g9WOcmXG4F0ROxzULzO2?p=preview Please let us know if you have any further assistance on this. Regards, Venkatesh Ayothiraman.

Ali Kholmatov · Answer

thanks, but what about dynamic data( above my code used loading...) ? and Can I off spinner for grid and use manual?

Venkatesh Ayothi Raman · Answer

Hi Ali Kholmatov, We have checked your query and you can achieve your requirement by using 'click()' event which is used to bind data dynamically in grid. We have prepared a simple sample based on your query in which we can use custom templates on the spinner instead of the default spinner by specifying the setSpinner method. we can show and hide spinner by using showSpinner() and hideSpinner()methods. Hence, you can show and hide the spinner manually. Please refer to the below example code, Documentation link and sample link. [component.ts] import { setSpinner } from '@syncfusion/ej2-popups'; setSpinner({ template: '

'}); @Component({ selector: 'app-root', template: `

. . . .

`, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class AppComponent implements OnInit { public data: Object[]; @ViewChild(GridComponent) public gridInit: GridComponent; ngOnInit(): void { } show(args:any){ this.gridInit.showSpinner(); } click(): void { this.gridInit.dataSource = orderData; } hide(args:any){ this.gridInit.hideSpinner(); } } Documentation : https://ej2.syncfusion.com/16.1.37/angular/documentation/spinner/?lang=typescript#set-the-template-to-the-spinner https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#showspinner https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#hidespinner sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/spinner950912671 Regards, Gurupriyadharshini S.

Ali Kholmatov · Answer

Thanks , but how Can I get this ?

  @ViewChild(GridComponent) public gridInit: GridComponent;

public ngAfterViewInit() {
        this.grid = this.gridInit;
        if (this.loadingReports) {
            this.grid.showSpinner();
        }
    }

Venkatesh Ayothi Raman · Answer

Hi Ali, Thanks for using Syncfusion products. As from your query, we suspect that would you like to hide the default spinner and load your own customized spinner before the grid rendering. If so, we have achieved your requirement using grid load event like as follows, [Grid]

. . .

ngOnInit(): void { //here we can show the custom spinner before the grid append to dom element let spinnerTarget: HTMLElement = document.querySelector('#customSpinner') as HTMLElement; createSpinner({ target: spinnerTarget , width: '20px' }); showSpinner(spinnerTarget); } [Load event] Note: In above code example, we have shown the custom spinner in ngonInit method. Sample: https://plnkr.co/edit/6GRBSTLHeRAbcWpeNM6F?p=preview Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/api-gridComponent.html#load Regards, Venkatesh Ayothiraman.

Goutham · Answer

Hi,

I am fetching the data using api service on initial rendering of page(api call in ngAfterViewInit) and attached data to grid data source,data is rendering correctly with out use of spinner.but when i used the showSpinner()(to use default grid spinner provided by sync fusion) method in it to initilize the spinner,showing below error.

As you mentioned above that "you are trying to load the spinner before the Grid element appends to the DOM".But i am showing spinner after view init lifecycle hook(Respond after Angular initializes the component's views and child views / the view that a directive is in)

Pavithra Subramaniyam · Answer

Hi Gautham, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We would like to inform you that, the Grid’s element will not be rendered in the “ngAfterViewInit”, this is why the script error occurred. To overcome this problem, we would like to suggest you to use the “ngAfterContentChecked” instead of “ngAfterViewInit”. In this method, the Grid’s element will be rendered and so you can use the “showSpinner” 






    ngAfterContentChecked(){  
        this.Grid.showSpinner();  
    } 


Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S.