Loader and "No Data To Display" message occuring at same time

Question

While the time of fetching data from an API, the loader and the "No Data To Display" text occurring at the same time. I need to display the "No Data To Display" text only after the API response and only if there is no data in the response.

Vikram Sundararajan · Answer

Hi Adarsh N P,Greetings from Syncfusion support,We understand that you want to only display the loading
icon while fetching process. need to display the "No Data To Display"
text only after the API response and only if there is no data in the response.
You can achieve your requirement by using load and dataBound event. Please
refer the below code snippet and sample for more reference,

methods: {
      load() {
        var grid =
  document.getElementsByClassName('e-grid')[0].ej2_instances[0];
        grid.defaultLocale.EmptyRecord = '';
      },
      dataBound(args) {
        var grid =
  document.getElementsByClassName('e-grid')[0].ej2_instances[0];
        if
  (grid.pageSettings.totalRecordsCount === 0) {
          grid.emptyRecordTemplate = 'No
  Records to Display';
        }
      },
    },

Sample: https://stackblitz.com/edit/kurlmp-lkhonx?file=src%2FApp.vuedataBound: https://ej2.syncfusion.com/vue/documentation/api/grid/#databoundLoad: https://ej2.syncfusion.com/vue/documentation/api/grid/#loadPlease get back us if you need further assistance.Regards,Vikram S

Adarsh N P · Answer

Hi,I have implemented this solution, it is working fine while loading data. But when there is no data in API response,'No Records to Display' is not displaying, just a blank grid is being displayed.

Vikram Sundararajan · Answer

Hi Adarsh N P,Sorry for the inconvenienced caused for previously provided solution is not working on your end. We suspect that this issue might be due to the combination of different features in the load and dataBound events. To achieve your requirement of displaying the "No Records to Display" message only after the API response confirms there is no data, we suggest using CSS to initially hide the empty row message and then utilize the dataBound event to show it only when there is no data in the response. First, we hide the initial "No Records to Display" message that appears in the grid. This can be done using the following CSS: This CSS rule sets the visibility of the empty row (the row that displays the "No Records to Display" message) to hidden, so it won't be visible when the grid is initially rendered or when data is being fetched from the API. Next, we use the dataBound event of the grid to check if there are any records in the response. If there are no records, we make the empty row visible again. Here’s how you can do it: methods: { dataBound(args) { const emptyRow = document.querySelector('.e-grid .e-emptyrow'); if (emptyRow) { emptyRow.style.visibility = 'visible'; } }, }, Sample; https://stackblitz.com/edit/kurlmp-zz8r1f?file=src%2FApp.vuePlease get back us if you need further assistance.Regards,Vikram S