Category / Section
How to show the spinner in React Grid while binding custom data source?
1 min read
Problem discussion:
Custom binding action of the Grid has been discussed in this Help Document. Usually, Spinner will not be displayed in the initial render of the custom data binding, so user need to handle this in created and dataStateChange event 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 as none in the dateStateChange 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.
Demo: https://stackblitz.com/edit/react-phj6rh-u98htc?file=index.js