Show Spinner for async data on grids

[Amarender Tangella]

I am using an ej2 grid in the Angular application. My data is async. I want a spinner while the data is loading like the one which we have for Filter or Sort behavior. Does the grid have one by default or do we need to create one? If possible an example would be great for how the spinner works for async data?

[Rajapandi Ravi]

Hi Amarender,

Greetings from Syncfusion support

Based on your shared information we could see that you want to show spinner continuously before the data loaded to the Grid after that you want to hide that spinner.

To achieve this requirement, we suggest to hide the Grid’s default spinner using display as none style reference and show/hide custom spinner whatever we want. In this load event we have showed spinner and in dataBound event we showed grid element and hided spinner based currentViewData length.

Please refer to the below code and sample link.

 

[app.component.html]

 

<div id="customSpinner"></div>

 

[app.component.ts]

 

[app.component.ts]

ngOnInit(): void {

    console.log(this.grid);

    this.pageSettings = { pageCount: 3 };

  }

  ngAfterViewInit() {

    console.log(this.grid);

    this.defineColumns();

    this.http.get(SERVICE_URI + "api/Orders").subscribe(res => {

      this.data = res;

    });

  }

  dataBound(args: any) {

    if (this.grid.currentViewData.length > 0) {

    // Spinner hided after data loaded to the Grid

      var spinnerTarget = document.querySelector(

        "#customSpinner"

      ) as HTMLElement;

      createSpinner({ target: spinnerTarget, width: "40px" });

      hideSpinner(spinnerTarget);

    }

  }

  load(args) {

    var spinnerTarget = document.querySelector("#customSpinner") as HTMLElement;

    createSpinner({ target: spinnerTarget, width: "40px" });

    showSpinner(spinnerTarget);    // Spinner showed while loading the data to Grid

  }

 

[app.component.css]

 .e-grid .e-spinner-pane{   

        display:none; 

    } 

 

Regards,

Rajapandi R

[Amarender Tangella]

Thanks for the answer. I saw some of your posts with this answer. But, I want to add the spinner on the grid, not on the entire page. This custom spinner doesn't load inside the grid. It works but loads on the entire page. How can I make it load only on the grid? I used CSS position: absolute for this. But, it overlays the grid and I cannot click the grid. I have to change the grid position to absolute as well. Is there a way to load the custom spinner inside the grid for Angular?

[Amarender Tangella]

Does syncfusion have a text indicator when loading data including spinner? Like Loading...

[Rajapandi Ravi]

Hi Amarender,

To achieve your requirement, we suggest you use custom templates on the Spinner instead of the default Spinner by specifying the template in the setSpinner method. This already explained in below link,

Documentation: https://ej2.syncfusion.com/angular/documentation/spinner/template/

We have prepared a sample based on your requirement. In that sample, we have rendered the customized spinner using template property. Please refer to the below code example and sample for more information.

App.component.html

 

<ejs-grid #grid1 [dataSource]="data" [allowPaging]="true">

-------

</ejs-grid>

 

App.component.ts

 

export class AppComponent {

  @ViewChild("grid1") grid_1: GridComponent;

  public data: DataManager;

 

  ngOnInit(): void {

    this.data = new DataManager({

      url: "https://services.odata.org/V4/Northwind/Northwind.svc/Orders/",

      adaptor: new ODataV4Adaptor()

    });

    setSpinner({

      template:

        '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>'

    });

  }

}

 

Sample: https://stackblitz.com/edit/angular-nmfvnv-u7o7dl?file=app.component.ts

Regards,

Rajapandi R