1

I use syncfusion angular GridComponent in my project. I want the grid to have a spinner once it's created and the spinner should spin until the data is loaded. to start a spinner I wrote a function for when the grid is created:

document-table.component.html

<ejs-grid #grid (created)="creadted()" ...>
...
</ejs-grid>

document-table.component.ts:

@ViewChild('grid') grid: GridComponent
ngOnChanges(changes: SimpleChanges){
   this.tableData = changes.data.currentValue;
   if(changes.data.currentValue != null){
      this.grid.hideSpinner=()=>false; //it doesn't work and the spinner still spinning
   }
created(){
   this.grid.hideSpinner =()=>true; //spinner start spinning
}

How can I stop the spinner after the data is loaded?

Nastaran Heydari
  • 155
  • 1
  • 5
  • 17
  • Use `this.grid.showSpinner()` to show the spinner and `this.grid.hideSpinner()` to hide the spinner. – frido Feb 18 '19 at 10:29
  • 1
    I tried, it doesn't work. – Nastaran Heydari Feb 18 '19 at 12:39
  • How do you load the data? Does `ngOnChanges` get triggered? Actually `ejs-grid` shows the spinner by default for all its actions. Are you sure you need to show / hide it manually? – frido Feb 18 '19 at 14:08
  • parent component of grid gets data from services and send it as an input to gird component (DocumentTableComponent) and in ngOnChange() I check if the data is changed so I assign it to another variable. the grid never shows the spinner before loading data by default so I had to use showSpinner and hideSpinner – Nastaran Heydari Feb 19 '19 at 06:35

1 Answers1

2

The ejs-gird docs say:

By default, grid shows the spinner for all its actions.

so I'm not shure if you need to set the spinner manually for your actions.

If you have to set the spinner manually you might have to wrap your function call with a setTimeout() if you want to trigger the function based on some changes made to the grid.

@ViewChild('grid') grid: GridComponent
ngOnChanges(changes: SimpleChanges){
   this.tableData = changes.data.currentValue;
   if(changes.data.currentValue != null) {
      setTimeout(() => this.grid.hideSpinner(), 0)
   }
}
created() {
   setTimeout(() => this.grid.showSpinner(), 0)
}

See also: Why is setTimeout(fn, 0) sometimes useful?

frido
  • 13,065
  • 5
  • 42
  • 56