Display a message in Kendo MVC grid when no results are displayed

If your grid is pageable, an alternative solution would be to do it like this:

.Pageable(pageable => pageable
    .Info(true)
    .Messages(msg => msg
        .Empty("There are no data")              // Default: "No items to display"
        .Display("{0} - {1} of {2} elements"))   // Default: "{0}-{1} of {2} items"

If your table contains any data, the Display message will be shown, otherwise the Empty message will be displayed. While noRecords() positions the message inside the body of the table, this method positions it on the right side of the table footer.

In the newest version of the Telerik controls you can simply place a string in the .NoRecords() helper function. I'm currently on version 2017.2.621

@(Html.Kendo().Grid<YourModel>()
.Name("grid")
.NoRecords("No Records Found.")

Just in case somebody that needs help is stuck using a legacy version, as I am, using version 2013.2.918.340, I do it as follows:

.Events(e => e.DataBound("onDataBound"))

The javascript:

function onDataBound(e) {
    if (!e.sender.dataSource.view().length) {
        var colspan = e.sender.thead.find("th:visible").length, emptyRow = '<tr><td colspan="' + colspan + '">No Records Found</td></tr>';
        e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
    }
}

I am checking the Kendo grid for its number of rows returned and add/removing a class that will display a "No records" message.

JavaScript:

function noRecordsMessage(gridElement) {
    // Purpose: Call this function on dataBound event to hide/display a "No records" message
    // Argument: the HTML element for the grid

    var ds = gridElement.data("kendoGrid").dataSource;

    if (ds.total() === 0) {
        // No records
        grid.find(".k-grid-content").addClass("empty-grid");
    } else {
        grid.find(".k-grid-content").removeClass("empty-grid");
    }
}

CSS:

<style>
    .empty-grid::before {
        padding: 1em;
        line-height: 3em;
        content: "No records found.";
    }
</style>