Grid do not show spinner while resolve observable

[Alex]

Hello,

I am using a grid control that is bound to observable via async pipe. It is working well but the grid control do not showing spinner at initial rendering while waiting a data from this observable. On other grid actions, such as paging and sorting, the spinner is shown. How can I show a spinner at initial rendering of the grid control ?

Thanks.

[Rahul Narayanasamy]

Hi Alex, 

 

Thanks for contacting Syncfusion support. 

 

Query: How can I show a spinner at initial rendering of the grid control ? 

 

We have validated your query and you can achieve your requirement by using the following method. You need to use beforeDataBound event to show spinner at initial rendering of the grid. Please find the below code example and sample for your reference. 

 

[code example] [app.component.html] 

<ejs-grid #grid [dataSource]='data | async' allowPaging=true (dataStateChange)='dataStateChange($event)' (beforeDataBound)='beforeDataBound($event)' (actionFailure)='fail($event)' allowGrouping=true> 

    <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="130" isPrimaryKey='true'></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column> 

        <e-column field="Freight" headerText="Freight" width="120" format='C2'></e-column> 

    </e-columns> 

</ejs-grid> 

 

In beforeDataBound event, we called toolbar-refresh function to show and hide the spinner as below. 

 

[app.component.ts] 

ngOnInit() { 

        this.pageOptions = { pageSize: 10, pageCount: 4 }; 

        let state = { skip: 0, take: 10 }; 

        this.service.execute(state); 

    } 

 

  public beforeDataBound(): void { 

        let fn = () => { 

            this.grid.showSpinner(); 

            this.grid.off('toolbar-refresh', fn); 

        }; 

        this.grid.on('toolbar-refresh', fn); 

    } 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/showspinner_async_pipe1737865968 

To run the sample, use the following commands. 

1. npm install.
2. npm start.
3. Open localhost:4200 in browser.

Please get back to us if you need further assistance on this. 

Regards, 

Rahul Narayanasamy. 

[Anandraj]

Hi Rahul, 

I am also facing the same issue and with help of your solution, I've resolving my issue partially.

Because displaying spinner at initial grid load are working fine moment when a grid DataSource having records.

In mycase:

Initially grid datasource having no records.

How to handle spinner display in the grid, when grid datasource having no records?

Thanks,

Raj 

[Hariharan J V]

Hi Anandraj, 

 

Query: I am also facing the same issue and with help of your solution, I've resolving my issue partially. Because displaying spinner at initial grid load are working fine moment when a grid DataSource having records. In mycase: Initially grid datasource having no records. How to handle spinner display in the grid, when grid datasource having no records? 

 

We have validated your query and created the sample based on your requirement. Here, we have hide spinner when the observable returning empty object from OrderService(ie: When the grid having empty records at initial). Please find the below code example and sample for your reference. 

 

[code example] 

[order.service.ts] 

... 

 

@Injectable() 

export class OrdersService extends Subject<DataStateChangeEventArgs> { 

    private BASE_URL = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';  

 

    constructor(private http: Http) { 

        super(); 

    } 

 

    public execute(state: any): void { 

        this.getData(state).subscribe(x => super.next({}));     //returning empty object 

    } 

 

    ... 

} 

[async-pipe.component.ts] 

... 

export class AsyncPipeComponent { 

  public data: Observable<DataStateChangeEventArgs>; 

  public pageOptions: Object; 

  public state: DataStateChangeEventArgs; 

  public isInitialLoad: boolean = false;              //creating boolean variable for preventing spinner when receiving empty object 

  @ViewChild('grid') 

  public grid: GridComponent; 

  ... 

 

  public load(args:any):void{ 

    this.isInitialLoad = true; 

  } 

  public beforeDataBound(e): void { 

    let fn = () => { 

      this.grid.showSpinner(); 

      this.grid.off('toolbar-refresh', fn); 

      if( !this.isInitialLoad && e.result.length == 0)      

      { 

        this.grid.hideSpinner();            //hide spinner 

      } 

      this.isInitialLoad = false; 

    }; 

    this.grid.on('toolbar-refresh', fn); 

  } 

} 

 

Sample link: https://stackblitz.com/edit/angular-he4tyg-zp9yzy?file=async-pipe.component.ts  

Please get back to us if you need further assistance. 

Regards, 

Hariharan