Articles in this section
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.

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() {
        this.orderService = new OrderService();
    created() {
        let spinnerTarget = document.querySelector('#customSpinner');
        createSpinner({ target: spinnerTarget, width: '20px' });
    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={} 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)}>
                        <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>
                    <Inject services={[Page, Group, Sort]} />



Custom Spinner

Figure 1: Show spinner for custom data binding.






Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied