在 Kendo 网格为空时显示一条消息答案

【问题标题】：Display a message within the Kendo grid when it's empty在 Kendo 网格为空时显示一条消息
【发布时间】：2014-06-22 00:29:56
【问题描述】：

当数据库中没有记录时，我正在尝试在网格内容中显示一条友好的消息（例如“未找到记录，请稍后再试”）。

从我在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"
        },

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

【问题讨论】：

标签： javascript jquery css kendo-ui kendo-grid

【解决方案1】：

好消息 - 这个选项现在可用：

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords#noRecords

您可以通过剑道模板设置消息：

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 时

【讨论】：

【解决方案2】：

您可以使用 CSS：DEMO

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

with litlle style：

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

【讨论】：

这是一个有趣的建议，但我不太确定 CSS 解决方案的可行性。也许我会想把应用程序国际化。
使用 css 仍然可以进行国际化。只需在页面中添加一个类，例如英语的“EN”，然后在你的类前面加上国家类 (.EN tbody:empty:before)
非常聪明的解决方案+投票，我喜欢它并且会使用它，不幸的是不支持我需要支持html /按钮等的情况
您实际上可以使用 HTML 数据属性将内容消息与实际 CSS 分离。
这很方便，因为它还支持 Kendo MVC，显然它仍然缺少与 KendoUI 的 noRecords 等效的功能。

【解决方案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找到一个正在运行的demo

【讨论】：

正是我需要的。用一个很好的演示很好地解释了。谢谢！
我不确定这是否是剑道版本的差异，但是对于我的网格，我必须从选择器中删除“.k-grid-header”和.k-grid-content”定位工作。
一些事情... 1) 'norecords' 选项现在在网格上可用 2) 不需要传递 jQuery 选择器 $('#grid')，只需传递 this 和它是对网格的引用 3) 那么你只需要执行 `if (!this.dataSource.total()) { // 附加“无记录”单元格 }
我的回答可能只对我演示中使用的版本有效。这是我相信的最后一个开源版本。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

    dataSource: []

现在，检查网格是否真正为空的正确方法是读取数据源本身。其他人这样做......通过阅读html DOM以更hacky的方式。请不要这样做，因为您可能有多个页面、过滤器等...其中项目位于数据源中但不在 DOM 中。以下是你应该怎么做：

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

现在，当您读取数据源时，每次都会触发 dataBound 事件。因此，您应该将上述代码放在 dataBound 事件中。检查网格数据源是否为空，然后向用户发送一条消息。这是我的 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 做了很多事情。这只是一个空的<div>，我在 html 页面上添加了 id msgBox，我用它来实例化一个kendoWindow 来创建弹出窗口，说没有数据。

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

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

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

【讨论】：

看起来像我需要的，我今天测试一下

【解决方案6】：

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

【讨论】：

grid.dataSource.total() == 0 应该是 grid.dataSource._data.length === 0

【解决方案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
};

【讨论】：

【解决方案8】：

你不能这样做吗 -

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

或者您正在寻找剑道内置的更清洁的东西？我认为，这是剑道 UI 中仍然存在的问题，尚未修复看到这个 - http://www.telerik.com/forums/empty-grid-norecords-template

【讨论】：

【解决方案9】：

如果您的网格有详细网格（嵌套网格），那么上述示例将不适用于嵌套网格。为确保将其应用于所有剑道网格，您可以执行以下操作：

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
}

【讨论】：

【解决方案10】：

剑道网格未找到数据消息

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

};

【讨论】：

【解决方案11】：

在网格数据绑定..

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

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

        }

【讨论】：

【解决方案12】：

不确定这个问题被问到的确切版本是什么，但就我而言，上述解决方案都不起作用。

我用了以下一个：

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

【讨论】：