Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Théo Buraglio-Mauron
50
IgxGrid isLoading is working only the first time
posted

Hello,

I'm not sure I correctly understood how isLoading is working

I got a grid that looks like this :

<igx-grid #f6Grid [data]="opaleForms$ | async" [isLoading]="isLoading$ | async>
<igx-column [resizable]="true" [field]="'Code'"></igx-column>
Some other columns...
</igx-grid>
The situations goes like :
  • View is loaded and everything is displayed with empty values (ie : The grid is here with the column but not values in it)
  • The user click on search button
  • The isLoading is set to true
  • The grid is displaying the spinner (loading works )
  • The data is returned, the isLoading is set to false
  • The grid is displaying data and not the spinner (still good )
  • The user click again on the search button to search something else
  • The isLoading is set to true
  • the grid is not displaying the spinner (not working )

Am I doing something wrong or is it supposed to work like that ?

Thanks
PS :
isLoading$ | async is used with NGRX store
I tried with a simpled value (isLoading) and I changed it manually but I still had the problem
Tell me if you need a repro, I should be able to make a stackblitz
Parents
No Data
Reply
  • 55
    Verified Answer
    Offline posted

    To solve this, I used an isLoading$ subject to keep track of when data is currently loading, and I subscribe to it at the level where the IgxGrid is implemented. When a new loading comes through as 'true', I set the grid data to null and then set the grid.isLoading property to my subject's value. 

    The main issue I believe is that when the grid still has data, the loading icon will not display, so give an empty data set to clear it.

     if (this.isLoading$){
      this.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
        if (loading) { this.grid.data = new Array(); }
        this.grid.isLoading = loading;
      });
    }

Children