grid spinner problem

[Goutham]

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 in thread id-138274 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)

[Hariharan J V]

Hi Gautham, 

Greeting from Syncfusion. 

Query: I want show the grid spinner, but when I use the showSpinner() grid's function, I get an error 

 

By default, we have created the spinner while rendering the grid component but in your code example you are tried to show the spinner in ngAfterViewInit(Spinner element yet not created) so that it cause the reported problem. 

If you want to show the custom spinner in grid then refer the below code example and documentation. Once grid rendered you can show and hide the spinner as per your requirement. 

<ejs-grid #grid [dataSource]='data' (created)='created($event)' height='400' width='100%'> 

. . . . . 

</ejs-grid> 

import { setSpinner } from '@syncfusion/ej2-popups'; 

 

setSpinner({ template: '<div class="loader-centerd-screen"><div></div></div>' }); 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'] 

}) 

   

 

created(){ 

    this.grid.showSpinner(); 

  } 

Help documentation : https://ej2.syncfusion.com/angular/documentation/spinner/template/?no-cache=1 

Regards, 

Hariharan