How to show the spinner in React Grid while binding custom data source?
Problem discussion:
Custom binding action of the Grid has been discussed in this Help Document. Usually, the spinner will not be displayed during the initial render of the custom data binding, so the user needs to handle this in the created and dataStateChange events of the Grid.
https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding
Render a Spinner:
To show a spinner in the initial render of the Grid, you can create a spinner in the created event of the Grid and set the visibility to none in the dataStateChange event. You have to place the Grid Component just below the Spinner Element.
import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Group, Sort, Inject } from '@syncfusion/ej2-react-grids';
import { Ajax } from '@syncfusion/ej2-base';
import { setSpinner, createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
export class CustomBinding extends SampleBase {
constructor() {
super(...arguments);
this.orderService = new OrderService();
}
created() {
let spinnerTarget = document.querySelector('#customSpinner');
createSpinner({ target: spinnerTarget, width: '20px' });
showSpinner(spinnerTarget);
}
dataStateChange(state) {
this.orderService.execute(state).then((gridData) => {
this.grid.dataSource = gridData;
document.querySelector('.e-spinner-pane').style.display = "none";
});
}
render() {
return (<div className='control-pane'>
<div id='customSpinner'></div>
<div className='control-section'>
<GridComponent dataSource={this.data} ref={g => this.grid = g} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 4, pageSize: 10 }} created={this.created.bind(this)} allowGrouping={true} dataStateChange={this.dataStateChange.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='ShipName' headerText='Ship Name' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Group, Sort]} />
</GridComponent>
</div>
</div>);
}
}
Output:
Figure 1: Show spinner for custom data binding.
Refer to the working sample for additional details and implementation: Sample
