I have used loadingIndicator as below. But it is showing "Can't bind to 'loadingIndicator' since it isn't a known property of 'ejs-grid'." error in html. followed below link for this,
https://ej2.syncfusion.com/angular/documentation/grid/loading-animation/
<ejs-grid [dataSource]='data' [loadingIndicator]='loadingIndicator'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
Hi Kumar,
Greetings from Syncfusion support
We have checked your reported problem at our end and tried to reproduce, but it was unsuccessful. Please refer the below code example and sample for more information.
App.component.ts
export class AppComponent { public data: DataManager; public pageSettings: Object; public loadingIndicator;
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void { this.data = new DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/UrlDataSource', adaptor: new UrlAdaptor }); this.pageSettings = { pageCount: 3 }; this.loadingIndicator = {indicatorType: 'Shimmer'}; } }
|
App.component.html
<ejs-grid #grid [dataSource]='data' allowPaging='true' allowSorting='true' allowFiltering='true' [pageSettings]='pageSettings' [loadingIndicator]='loadingIndicator'> <e-columns> <e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column> <e-column field='Employees' headerText='Employee Name' width='145'></e-column> <e-column field='Designation' headerText='Designation' width='130'></e-column> <e-column field='CurrentSalary' headerText='Current Salary' width='140' format="C2" textAlign='Right'></e-column> </e-columns> </ejs-grid>
|
Sample: https://stackblitz.com/edit/angular-dt57vx?file=main.ts,app.component.html,app.component.ts
Sample Demos: https://ej2.syncfusion.com/angular/demos/#/material/grid/loading-animation
Regards,
Rajapandi R
Hi,
which version it support?. I am using syncfusion V20.1.47. In this version, in GridComponent loadingIndicator is not present.
Hi Kumar,
Thanks for your update
We have provided the Loading Indicator support for the Grid from our Vol 3 main Release 20.3.47 version. So please upgrade your Syncfusion package to the mentioned version or latest version 20.3.52.
Documentation: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/
Regards,
Rajapandi R
Hi,
I'm facing the same issue. The loading indicator is not working for my grid when there is no pagination option.
Hi Anu,
In the absence of pagination, all data will be loaded at the initial rendering of the Grid. If the data loading time is short, there will be no loading indicator to indicate the data loading process. However, you will see the loading indicator when performing actions such as sorting or filtering. You can refer to the provided sample link to observe the loading indicator of shimmer type during sorting or filtering.
If you are still experiencing issues, please provide the following details to assist us in offering a better solution:
- Specify the type of data binding used in the Grid (Remote or Local data binding).
- If remote data binding is used, please provide details of the adaptor and code lines defining the dataManager.
- Specify the type of loading indicator being used.
- Mention the Syncfusion package version you are currently using.
- Share the complete Grid rendering code, including any customized functions.
Please refer the below documentation for further details.
Documentation Link: Loading-indicator
Regards
Aishwarya R