Enhancing User Experience: How to Display a Custom Message in a Kendo Grid When It's Empty

 To display a custom message in a Kendo grid when it's empty or there is no data, you can use the built-in feature called "no records template." This template allows you to define custom content that will be displayed when the grid doesn't have any data.

Here's an example of how you can set up a Kendo grid with a custom message when it's empty:

$("#grid").kendoGrid({
  dataSource: {
    // your data source configuration
    // ...
  },
  columns: [
    // your grid columns configuration
    // ...
  ],
  noRecords: {
    template: '<div class="kendo-grid-no-records">No data available.</div>'
  }
});

In the above code, the noRecords option is set with a custom template. The template is defined as a <div> element with a class name of "kendo-grid-no-records" and the message "No data available." You can style this element using CSS to customize the appearance of the message.

Remember to replace "#grid" with the appropriate selector for your grid element.

With this configuration, when the grid's data source is empty, the custom message will be displayed in place of the grid content.

You can modify the template to suit your specific requirements, such as adding additional HTML elements, styling, or dynamic content.