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.

score 6 · Accepted Answer · edited Oct 04 '16 at 18:51

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:

I have no idea why the .Norecords() configuration is still not prominently displayed on the Telerik data grid binding documentation. Thank you so much! https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/binding/overview — Synctrex, Oct 29 '20 at 21:30

score 2 · Answer 2 · answered Feb 15 '17 at 15:37

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);
    }
}

This answer is perfectly solved my issue. given vote for that. — Hitesh Kansagara, Jun 30 '21 at 10:55

score 1 · Answer 3 · answered Sep 22 '16 at 20:48

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>

FYI, the MVC .NoRecords() config does now display in the grid body. It supports NoRecords() to display a default message with default styling, NoRecords(string) for a custom message with default styling, and NoRecords(GridNoRecordsSettingsBuilder) to set up a template with whatever you want. I don't know what version it was introduced in but it definitely works in 2016.3.914. — The Dread Pirate Stephen, Sep 23 '16 at 13:25

score 1 · Answer 4 · answered Dec 05 '17 at 16:08

1

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.")

answered Dec 05 '17 at 16:08

jaredbaszler

3,941
2
32
40

score 1 · Answer 5 · answered Oct 07 '20 at 10:11

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.

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

5 Answers5

JavaScript:

CSS: