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.
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
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
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
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
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