We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

loadingIndicator is not working in syncfuion grid

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>

5 Replies

RR Rajapandi Ravi Syncfusion Team October 21, 2022 11:05 AM UTC

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




KK Kumar, K Bharath replied to Rajapandi Ravi October 27, 2022 12:36 PM UTC

Hi,

which version it support?. I am using syncfusion V20.1.47. In this version, in GridComponent loadingIndicator is not present.





RR Rajapandi Ravi Syncfusion Team October 28, 2022 01:56 PM UTC

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



AM Anu Mathew March 26, 2024 07:08 AM UTC

Hi,


I'm facing the same issue. The loading indicator is not working for my grid when there is no pagination option. 



AR Aishwarya Rameshbabu Syncfusion Team March 28, 2024 06:55 AM UTC

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.


Sample: https://stackblitz.com/edit/angular-gpts6x-wmtbne?file=src%2Fapp.component.html,src%2Fapp.component.ts


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


Loader.
Live Chat Icon For mobile
Up arrow icon