我正在尝试在网格内容中显示友好的消息（例如 "未找到记录，请稍后重试"），当数据库中没有记录时。
根据我在文档中所看到的，目前无法对网格内容执行此操作。 只有页脚可以实现。 您可以在此fiddle中查看示例：http://jsfiddle.net/lav911/uNWXJ/
我故意拼错了数据路由，以便使网格为空。 要查看带有内容的网格，请注释/取消注释这些行：
transport: {
// read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customerss"
},
有没有一种清晰的方法来实现这个？
好消息-现在可用此选项：
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords#noRecords
你可以通过kendo模板设置信息：
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
}
noRecords: true,
messages: {
noRecords: "There is no data on current page"
}
当设置noRecords: true时，默认文本为"No records available."。
在定义网格时，我使用以下内容：
$('#grid').kendoGrid({
dataSource: employeeDataSource,
dataBound: function () {
DisplayNoResultsFound($('#grid'));
},
JavaScript函数'DisplayNoResultsFound'定义如下：
function DisplayNoResultsFound(grid) {
// Get the number of Columns in the grid
var dataSource = grid.data("kendoGrid").dataSource;
var colCount = grid.find('.k-grid-header colgroup > col').length;
// If there are no results place an indicator row
if (dataSource._view.length == 0) {
grid.find('.k-grid-content tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>No Results Found!</b></td></tr>');
}
// Get visible row count
var rowCount = grid.find('.k-grid-content tbody tr').length;
// If the row count is less that the page size add in the number of missing rows
if (rowCount < dataSource._take) {
var addRows = dataSource._take - rowCount;
for (var i = 0; i < addRows; i++) {
grid.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td> </td></tr>');
}
}
}
可以在这里找到一个运行演示。
this，它是对网格的引用 3）然后您只需要执行if(! this.dataSource.total()){//添加“无记录”单元格} - dmathisen2015.2.805版本开始，此功能已支持开箱即用。 http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template
// Kendo Grid
dataSource: dataSource,
dataBound:gridDataBound,
//No data in the grid show message
function gridDataBound(e) {
var grid = e.sender;
if (grid.dataSource.total() == 0) {
var colCount = grid.columns.length;
$(e.sender.wrapper)
.find('tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">There is no data to show in the grid.</td></tr>');
}
};
无论如何，这是我的解决方案。首先，为了模拟一个空数据源，我已经设置了数据源，如下所示：
dataSource: []
if($("#grid").data("kendoGrid").dataSource.data().length===0){
//do your stuff!
}
dataBound: function (e) {
var grid = $("#grid").data("kendoGrid");
var mBox = $("#msgBox");
if (grid.dataSource.data().length === 0) {
if (!mBox.data("kendoWindow")) {
mBox.kendoWindow({
actions: ["Close"],
animation: {
open: {
effects: "fade:in",
duration: 500
},
close: {
effects: "fade:out",
duration: 500
}
},
modal: true,
resizable: false,
title: "No items",
width: 400
}).data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").center().open();
} else {
mBox.data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").open();
}
}
}
mBox 做很多事情。这只是一个空的 <div>，我在html页面上添加了id为msgBox，我正在使用它来实例化一个 kendoWindow 来创建弹出窗口，告诉用户没有数据。if 和 else 逻辑与 mBox 简单处理后续调用以显示消息。第一次，kendoWindow 尚未被实例化，因此它通过 if 子句。随后的调用将只重新打开窗口。
试一试 :). 您可以点击下一页按钮以验证它会再次显示弹出窗口。这里是一个 jsFiddle演示。
// Replace the grid content with a status message (Can be reused for data errors if you want to show "Request failed [Reload]" or something like that.
kendo.ui.Grid.prototype._showStatus = function (message) {
var status = this.content.find(".k-status");
if (!status.length) {
status = $("<div class='k-status' />").appendTo(this.content.closest(".k-grid-content"));
}
status.html(message);
};
// Put back the grid content instead of the status message
kendo.ui.Grid.prototype._hideStatus = function () {
this.content.find(".k-status").remove();
};
// Keep the original render function so we can call it int our override
kendo.ui.Grid.prototype.__renderContent = kendo.ui.Grid.prototype._renderContent;
// Override the render function
kendo.ui.Grid.prototype._renderContent = function (data, colspan, groups) {
this.__renderContent(data, colspan, groups);
if (data.length)
this._hideStatus();
else
this._showStatus("No data."); // Could also add an option for that text so you can choose the message in a grid config
};
//ondatabound on user assginment grid grid
function onUserAssignGridDataBound(e) {
//Get the number of Columns in the grid
var colCount = $("#UserAssignGrid").find('.k-grid-header colgroup > col').length;
//If There are no results place an indicator row
if ($("#UserAssignGrid").data("kendoGrid").dataSource._view.length == 0) {
$("#UserAssignGrid").find('.k-grid-content tbody')
.append('<tr class="kendo-data-row"><td colspan="' +
colCount +
'" style="text-align:center; padding-top:10px;background-color:#AFE4FA"><b>No Results Found!</b></td></tr>');
}
如果您的网格具有详细网格（嵌套网格），则上述示例将无法在嵌套网格上工作。为确保将此应用于您所有的kendo网格，您可以执行以下操作：
function kendoEmptyGridFix() {
$("[data-role='grid']").each(function() {
$(this).data("kendoGrid").bind('detailInit', function(e) {
kendoEmptyGridFix();
});
$(this).data("kendoGrid").bind('dataBound', function(e) {
var colCount = this.table.find("tHead tr th").length;
if ($(this)[0].dataSource._view.length == 0) {
var msg = ($(this)[0].dataSource.options.emptyMsg == undefined ? "No Results Found!" : $(this)[0].dataSource.options.emptyMsg);
this.table.find('tbody').html('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center; padding-top:20px; padding-bottom:20px;"><div class="k-empty-grid-row">' + msg + '</div></td></tr>');
// optional to hide pager section
this.table.parent().find('.k-grid-pager').hide();
};
});
});
}
当您的所有内容加载完成后，请调用此函数，无需将其添加到每个网格中。
$(document).ready(function () {
kendoEmptyGridFix();
});
如果你想改变消息，那么请将emptyMsg添加到你的数据源中，例如：
dataSource: {
transport: {
read: {
url: "/getItems/" + e.data.id,
dataType: "xml"
}
},
emptyMsg: 'There are currently no items available',
schema: {
type: "xml",
data: "/a/b",
model: {
fields: {
"id": "id/text()",
"status": "status/text()"
}
}
},
pageSize: 20
}
if(this.tbody.rows.length === 0) {
alert('no records');
return;
}
或者您正在寻找更加简洁的东西，即Kendo内置的内容？我认为，在Kendo UI中仍存在这个问题，尚未得到解决。请参见此处 -http://www.telerik.com/forums/empty-grid-norecords-template