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
close icon

How to hide "No records to display" when grid data is rendering.

Hi Team,


I am facing an issue with hiding the content "No records to display" when grid data is rendering.

please help me to hide the content in the background when data is still rendering.

Attached video 



Regards,
Cyril Ovely.


Attachment: Empty_a08fa796.zip

5 Replies

RR Rajapandi Ravi Syncfusion Team October 26, 2022 09:10 AM

Hi Cyril,


Greetings from Syncfusion support


By default, in EJ2 Grid when we bound large amount of data to Grid it will take some time to load the full data to the grid. 


So, before the data is loaded in the grid the No records to display message will be displayed in the grid and it is the default behavior of the grid.


If you want to hide the No records to display message, you can use the below code example to achieve your requirement using EJ2 Grid’s load event.


load() { //load event of Grid

    (this.grid.localeObj as any).currentLocale.EmptyRecord = '';

  }


API: https://ej2.syncfusion.com/vue/documentation/api/grid/#load


Regards

Rajapandi R



CO Cyril Ovely November 9, 2022 01:56 AM

Hi Rajapandi,

Thanks for your response. But here we want to hide "No records found" only when grid is loading and if data is not present in API response we want to show "No records found" as usual.

In the above solution, I am not able to get grid using  (this. grid)    . I have also tried using $refs as below



Please help me in hiding "No records found" only when grid is loading.


Thanks in advance,

Regards,
Cyril Ovely



RR Rajapandi Ravi Syncfusion Team November 14, 2022 08:42 AM

Hi Cyril,


We could see that you are not able to access the Grid instance in the load event of Grid. You can also get the Grid instance by using the grid ID, please refer the below code example for more information.


load() { //load event of Grid

                                                      //give your Grid id here

var grid = document.getElementById('Grid').ej2_instances[0]; //Grid instance

grid.localeObj.currentLocale.EmptyRecord = '';

 

  }


Regards,

Rajapandi R



CO Cyril Ovely November 17, 2022 12:17 AM

Hi Rajapandi,

Thanks for updating the snippet. Can you also add how to set "No Records Found" if the grid data is empty after response from API.


Regards,
Cyril Ovely



RR Rajapandi Ravi Syncfusion Team November 17, 2022 08:00 AM

Hi Cyril,


We could see that after your API call, if there are no records in the results you like to display the message as ‘No Records found’. Based on the currentViewData you can display your custom message in the dataBound event of Grid. Please refer the below code example for more information.


load() { //load event of Grid

                                                      //give your Grid id here

var grid = document.getElementById('Grid').ej2_instances[0]; //Grid instance

grid.localeObj.currentLocale.EmptyRecord = '';

 

  }

 

dataBound() {//dataBound event of Grid

var grid = document.getElementById('Grid').ej2_instances[0]; //Grid instance

if(grid.currentViewData.length > 0) {

grid.localeObj.currentLocale.EmptyRecord = 'No Records Found'; //set your custom message here

}


API: https://ej2.syncfusion.com/vue/documentation/api/grid/#databound


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon