Grid data on loading

[ONG YU FENG]

Hi there

I am wondering if is possible to change "No records to display" to some circular progress or loading while retrieving information? if there is no data received, the circular will then change back to No records to display.

[Manivel Sellamuthu]

Hi ONG, 

Greetings from Syncfusion support. 

From your query, we suspect that you want to change the “No records to display”, while the grid is requesting the data(spinner is showing in the Grid). You can achieve your requirement using L10n.load and dataBound event of the Grid. Please refer the below code example and sample for more information. 

. . . 

import { L10n } from '@syncfusion/ej2-base'; 

. . . 

 

// initially applying the display message as per requirement 

L10n.load({ 

  'en-US': { 

      'grid': { 

          'EmptyRecord': 'Loading the data', 

      } 

  } 

});   

export class RemoteDataBinding extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 

        this.data = new DataManager({ url: this.hostUrl + 'api/Orders', adaptor: new WebApiAdaptor }); 

    } 

 

    dataBound (args) { 

      var emptyRow = document.querySelector('.e-emptyrow'); 

      if (emptyRow) 

      { 

// changing the message as default once data is loaded 

        emptyRow.cells[0].innerText = "No records to display" 

      }  

      } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent id="Grid" dataSource={this.data} dataBound={this.dataBound.bind(this)}  

                        <ColumnsDirective> 

. . . 

                        </ColumnsDirective> 

                        <Inject services={[Page]}/> 

                    </GridComponent> 

                </div> 

                <div id='waitingpopup' className='waitingpopup'> 

                    <span id='gif' className='image'></span> 

                </div> 

            </div>); 

    } 

} 

 

render(<RemoteDataBinding />, document.getElementById('sample')); 

Sample: https://stackblitz.com/edit/react-7pqzsg?file=index.js 

If we misunderstood your query or this is not your exact requirement, please explain more about your requirement. 

Regards, 

Manivel