Question

我尝试在网格内容中显示友好消息（如＆＃34;未找到记录，稍后再试＆＃34; ），当时没有记录数据库中。

根据我在docs中看到的内容，目前无法为网格内容执行此操作。它仅适用于页脚。你可以在这个小提琴中看到这个例子：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"
        },

有没有一种干净的方法来实现这一目标？

Answer 1

好消息 - 此选项现已上市：

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

or via message option:

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

默认文本为“无可用记录”。设置noRecords时为true：

Answer 2

您可以使用CSS： DEMO

tbody:empty:before {
    content:'NO DATA';
}

with litlle style ：

tbody:empty:before {
    content:'NO DATA';
    display:table-cell;
    padding:0.5em;
}

Answer 3

在定义网格时使用以下内容：

$('#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>&nbsp;</td></tr>');
        }
    }
}

可以找到正在运行的演示here

Answer 4

2015.2.805版本支持开箱即用。 http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template

Answer 5

首先，你只能通过提供错误的读取网址来伪造空数据源。这只会导致读取错误，并且永远不会触发网格数据源的任何更新（即，dataBound事件永远不会发生）。另一方面，空数据源仍然是有效的数据源，将触发dataBound事件。

无论如何，这是我的解决方案。首先，为了模拟一个空的数据源，我设置了数据源，如下所示：

    dataSource: []

现在，检查网格是否真正空的正确方法是读取数据源本身。其他人通过阅读html DOM以更加黑客的方式做到这一点。请执行 NOT 执行此操作，因为您可能有多个页面，过滤器等...其中项目位于dataSource但不包含DOM。这是你应该怎么做的：

if($("#grid").data("kendoGrid").dataSource.data().length===0){
    //do your stuff!
}

现在，当您读取数据源时，每次都会触发dataBound事件。因此，您应该将上面的代码放在dataBound事件中。检查grid dataSource是否为空，然后向用户发送消息。这是我的dataBound的完整代码。

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做了很多事情。这只是我在html页面上添加了<div>的空msgBox，我用它来实例化kendoWindow来创建弹出文件，说明没有数据。

您可以找到有关kendoWindow here的更多信息。因此，我只是利用了可以自定义和可控制的kendo UI小部件库的另一部分，而不是使用丑陋的警报框。

if和else逻辑与mBox只是处理后续调用以显示消息。第一次，kendoWindow尚未实例化，因此它通过了if子句。只需重新打开窗口即可进行后续调用。

试一试:)。您可以单击下一页按钮以验证它是否会再次显示弹出窗口。这是一个jsFiddle Demo。

Answer 6

enter image description here

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

Answer 7

我知道我迟到了，但这就是我刚刚做到的。它主要是从TreeList的无数据特征中复制过来的（我很生气，你对标准网格没有相同的东西）。我把它变成了一个原型扩展，所以它会自动添加到每个网格中。还可以添加一个选项以使消息可配置。

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

Answer 8

你不能做这样的事 -

if(this.tbody.rows.length === 0) {
     alert('no records');
     return;
}

或者你正在寻找一些甚至更干净的东西内置于剑道？我认为，这仍然是Kendo UI中尚未解决的问题见这 - http://www.telerik.com/forums/empty-grid-norecords-template

Answer 9

关于网格数据绑定..

添加以下脚本以显示消息。

 //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>');

        }

Answer 10

如果您的网格有详细网格（嵌套网格），则上述示例不适用于嵌套网格。为确保将此应用于所有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，即

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
}

Answer 11

Kendo grid No Data found 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">Sorry, no data :(</td></tr>');
}

};

Answer 12

不确定此问题的确切版本是什么，但在我的情况下，上述解决方案均无效。

我使用了以下一个：

config : {
     noRecords: {
          message: "No records found."
     },
}

当空的时候在Kendo网格中显示一条消息

12 个答案: