Display a Message Within the Kendo Grid When It's Empty

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()#"
}

or via message option:

noRecords: true,
messages: {
    noRecords: "There is no data on current page"
}

default text is "No records available." when set noRecords: true only

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

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:

kendo ui grid cell empty message

As i know, there is no configuration for cell/column like "NoDataMessage", so you should check your property for null in template:

template: "<div class=\'priceTempl\'>#: UnitPrice != null ?  UnitPrice : 'No data'#</div>"

Kendo with Angular2: How to display custom message when there are no records available in Kendo Grid

This can be achieved by nesting the kendo-grid-message component within the kendo-grid.

<kendo-grid [data]="[]">
  <kendo-grid-messages
    noRecords="There are no items to display.">
  </kendo-grid-messages>
</kendo-grid>

Make sure you are using the correct capitalization for the inputs (camel case).

For a more in-depth description on that topic please refer to the globalization documentation .

A list of available inputs for the kendo-grid-messages component can be found here.

Show Message When DataSource Returns Empty for a Kendo ComboBox

I think you need to use the RequestEnd event instead. If I remember correctly, you can get a handle to the datasource inside the event using the following syntax:

this.dataSource.data();

or

.DataSource(source => source.Read(read => read.Action("findmeter", "rtf", new { area = "documents" }))
    .Events(e=>e.RequestEnd("requestEnd"))
    .ServerFiltering(true))

Kendo Grid for MVC displays 'no records found' message while fetching data, after upgrading Kendo UI to version 2020.1.406

since it is a bug in Kendo UI, do not use NoRecords method of grid. Instead use DataBound event and call below JS function:

function onGridDataBound(e) {
if (!e.sender.dataSource.view().length) {
var colspan = e.sender.thead.find("th:visible").length, emptyRow = 'No Record Found.';
e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
}
}

c# html - hide kendo grid when empty

What about using the DataBound event handler to define check the dataSource binded and show or hide the grid.

Here is an example of something similar, but in this case it shows a message when the grid is empty.

http://blog.falafel.com/displaying-message-kendo-ui-grid-empty/

code example:

 @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()        .Name("grid")        .Columns(columns =>        {            columns.Bound(p => p.ProductName).Title("Product Name");            columns.Bound(p => p.UnitPrice).Title("Unit Price");            columns.Bound(p => p.UnitsInStock).Title("Units In Stock");        })        .Events(events => events.DataBound("onGridDataBound"))        .DataSource(dataSource => dataSource            .Ajax()            .Read(read => read.Action("Products_Read", "Grid"))         )    )
<script>
  function onGridDataBound(e){    var grid = e.sender;        if (grid.dataSource.total() == 0 ){    //Hide grid      $(grid).hide();    }    else{      //Show grid      $(grid).show();    }  }  </script>

---

Related Topics