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

Question

I need to display a friendly error message in the main Kendo grid area, instead of displaying a blank content area.

This is similar to this question but I am using Kendo MVC, and as Telerik's help reports: "NoRecordsTemplate is not available in Kendo UI Grid for ASP.NET MVC"

I’m providing the solution I came up with as an answer (which is similar to one on the other question). I’m not quite satisfied with the solution, as it’s hard to customize the error message.

Answer 1

As requested, here is the working example:

I used the oldest version of Kendo that I had installed (2015.2.902, but I also did it with 2016.3.914) and simply modified the Filter Row example from the examples solution in the install folder (C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2015\wrappers\aspnetmvc\Examples\VS2015).

I modified the file:

C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2015\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Areas\razor\Views\grid\filter_row.cshtml

and just added the .NoRecords() to the razor for the grid and your <style> block:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(220);
    columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
    columns.Bound(p => p.Freight).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .ServerOperation(true)
    .Read(read => read.Action("Orders_Read", "Grid"))
 )
 .NoRecords(x => x.Template("<div class='empty-grid'></div>"))
)

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

and this was the output: