"No records available" in Kendo Grid while it's loading

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 06 Mar 2025 08:49 by ADMIN

Alex

Created on: 05 Apr 2021 17:54

Category: Kendo UI for Angular

Type: Bug Report

"No records available" in Kendo Grid while it's loading - even if there are records

While the grid is initially loading data, the "No records available." message is confusing and provides no useful information.

Expected behavior - when the grid is initially loading, don't display the message as the rows/data might very well appear

To reproduce basically just go to the grid demo page (refresh if needed) and pay attention to the grid loading: https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

Example in our project - intuitively you'd think that the grid has no records until you see the loader; in any case, the message looks out of place:

7 comments

ADMIN

Martin Bechev

Posted on: 06 Mar 2025 08:49

Hello Serhii,

Thank you for the provided feedback and details.

Using the no-records template or overriding the noRecords property (of the custom messages) depending on the loading state are possible solutions to hide the message when the loading spinner is shown:

<kendo-grid-messages [noRecords]="initialLoading ? '' :  'No records available'> </kendo-grid-messages>

The initial value of the initialLoading can be set to true. This way, the message will be hidden when loading data. Once data is received, you can set it to false in order to show the message as by default.

The case cannot be considered as a bug, as the message correctly reflects the state of the Grid at the time of loading the data (the Grid still does not have anything to show).

If the requirement is to hide the message when the spinner is shown, consider implementing one of the two options above.

Regards,
Martin Bechev
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Serhii

Posted on: 27 Feb 2025 15:51

Just want to mention, I as well consider this behaviour confusing.

"In general, the component does not know when the data will be available."

It doesn't have to know when, it knows that it is currently in the loading state and showing both 'no data' and 'loading' states just creates visual confusion, especially when they are rendered one over another.

The way we get around this is by having custom template and listening to grid loading state. I guess similar can be done wuth <kendo-grid-messages> as proposed by Martin Bechev, if you don't need custom template

<kendo-grid
  #grid
  [data]="ordersQuery.data()"
  [loading]="ordersQuery.isFetching()"
>
  <ng-template kendoGridNoRecordsTemplate>
    <hyb-grid-no-records-state [fetching]="grid.loading" />
  </ng-template>
/>

ADMIN

Yanmario

Posted on: 07 Jul 2023 04:42

Hi Youssef,

This does indeed seem to be an unusual behavior that has been reported for the first time. Therefore, I would recommend creating a separate bug report in our public GitHub repository or support ticket that includes additional context, steps to reproduce the issue, and an example.

Regards,
Yanmario
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

youssef

Posted on: 30 Jun 2023 11:09

in my case the no record message is displayed even though the grid has data

Cupcake

Posted on: 18 Jan 2023 11:46

Hi I have a similar problem but on React.
I do want to use GridNoRecords but on entering, the grid shows at beginning the message "there is no data", then data arrives and the message disappears.
The "no data" message must NOT appear at the beginning, but it needs to appear only when data are really arrived and they are missing.

Alex

Posted on: 12 Apr 2021 09:38

Thanks for the response!

ADMIN

Martin Bechev

Posted on: 09 Apr 2021 09:11

Hi Alex,

Thank you for your feedback.

By design, the 'No records available.' message appears when there is not data in the Grid. In the mentioned scenario, the Grid still has no data, and the message is expected to appear. In general, the component does not know when the data will be available.

The message reflects the current state of the Grid and it is not considered as a bug.

In order to avoid showing this message, the developer can use <kendo-grid-messages> and set the noRecords property to an empty string.

  <kendo-grid>
        <kendo-grid-messages noRecords="">
        </kendo-grid-messages>
    </kendo-grid>

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.