AnswerBun.com

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

Stack Overflow Asked by Tim Grant on November 4, 2020

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.

5 Answers

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)TelerikUI for ASP.NET MVC Q2 2015wrappersaspnetmvcExamplesVS2015).

I modified the file:

C:Program Files (x86)TelerikUI for ASP.NET MVC Q2 2015wrappersaspnetmvcExamplesVS2015Kendo.Mvc.ExamplesAreasrazorViewsgridfilter_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: enter image description here

Correct answer by The Dread Pirate Stephen on November 4, 2020

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.

Answered by somoria on November 4, 2020

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 by jaredbaszler on November 4, 2020

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

Answered by Paul Zahra on November 4, 2020

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>

Answered by Tim Grant on November 4, 2020

Add your own answers!

Related Questions

Using user input to retrieve data

1  Asked on January 1, 2022 by phast

     

What does “Cch” mean in StringCchPrint*?

1  Asked on January 1, 2022 by ari-sweedler

 

How to encode base_64 without slash in PHP?

1  Asked on January 1, 2022 by burhan

     

Issue with event listener and value not updating

1  Asked on January 1, 2022 by penone

 

Cannot package signed Java security providers with JMOD

1  Asked on January 1, 2022 by travesty

   

Unity and C# DebugLog Not Printing Everything

1  Asked on January 1, 2022 by a4treok

   

activate virtualenv in git bash using pycharm on windows

4  Asked on January 1, 2022 by mostafa-ghadimi

       

passing data from javascript variable to an ejs variable

1  Asked on January 1, 2022 by kevin-terblanche

     

How to scrape all topics from twitter

2  Asked on January 1, 2022 by suraj-subramanian

         

Using lodash to modify object

2  Asked on January 1, 2022 by prova12

   

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP