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>

3 Replies

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

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 07:36 AM

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 08:56 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon