Display a message within the Kendo grid when it's empty
Good news- this option is available now:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords#noRecords
you can set message via kendo template:
noRecords: { template: "No data available on current page. Current page is: #=this.dataSource.page()#"}
noRecords: true,messages: { noRecords: "There is no data on current page"}
default text is "No records available." when set noRecords: true only
You may use CSS: DEMO
tbody:empty:before { content:'NO DATA';}
tbody:empty:before { content:'NO DATA'; display:table-cell; padding:0.5em;}
I use the following when defining the grid:
$('#grid').kendoGrid({ dataSource: employeeDataSource, dataBound: function () { DisplayNoResultsFound($('#grid'));},
The javascript function 'DisplayNoResultsFound' is defines as follows:
function DisplayNoResultsFound(grid) { // Get the number of Columns in the grid var dataSource = grid.data("kendoGrid").dataSource; var colCount = grid.find('.k-grid-header colgroup > col').length; // If there are no results place an indicator row if (dataSource._view.length == 0) { grid.find('.k-grid-content tbody') .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>No Results Found!</b></td></tr>'); } // Get visible row count var rowCount = grid.find('.k-grid-content tbody tr').length; // If the row count is less that the page size add in the number of missing rows if (rowCount < dataSource._take) { var addRows = dataSource._take - rowCount; for (var i = 0; i < addRows; i++) { grid.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td> </td></tr>'); } }}
A running demo can be found here