GridNoRecords no longer works?

[Tim]

Hello, we are using KendoReact DataGrid 9.3.1. I want to show something more specific and branded when the DataGrid has no records. I tried the example on this page:

https://www.telerik.com/kendo-react-ui/components/grid/api/gridnorecords

What is the correct way to do this in 9.3.1? There appears to be no "noRecords" property on Grid and <GridNoRecords> fails no matter what I put in there, also doesn't support a "content" attribute. What is the correct way to use it?

[Hetali]

Hello Tim,

Thank you for reaching.

In order to show something specific if there are no records in the Data Grid, the GridNoRecords component should be used. The syntax described in the page works as expected for me in Data Grid v9.3.1 as seen in this StackBlitz example. Please make sure to import the component as seen below:

import { Grid, GridColumn as Column, GridNoRecords } from '@progress/kendo-react-grid';

const App = () => {
  return <Grid data={[]}>
           <GridNoRecords>Custom text: There is no data available</GridNoRecords>
           <Column field="ProductID" title="ID"  />
           <Column field="ProductName" title="Name" />
         </Grid>;
  };
export default App;

Output:

Give this example a try and let me know if it helps. If you're unable to show custom text for no records, please respond with more details like updated StackBlitz example and/or a running isolated application, etc., I will then assist you.

Looking forward to hearing from you.

Regards,
Hetali
Progress Telerik

[Tim]

Thank you for your response, Hetali. I cut and pasted your code into a new element in my project, which uses version 9.3.1. Here is what it looks like and the error I get. What could be the problem?

[Tim]

Our project is currently on React 18.3.1 - could that be the problem?

[Hetali]

Hi Tim,

The example that I shared before uses React v18.3.1. So, that's not the issue. Additionally, I also tested the example with .tsx files and the GridNoRecords component worked fine there as well as seen in this StackBlitz example.

The error is probably pertaining to the TypeScript version as mentioned in  this GitHub discussion. Could you please share a running example so I can replicate the error and investigate further?

Regards,
Hetali
Progress Telerik