Javascript 在剑道网格中显示一条消息，当它'；它是空的

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

从我在中看到的情况来看，目前没有办法对网格内容执行此操作。只能对页脚执行此操作。你可以在这把小提琴上看到这个例子：

我故意拼错了数据路由，为了有一个空的网格。要查看内容，只需注释/取消注释以下行：

transport: {
            // read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customerss"
        },

---

有没有一个干净的方法可以做到这一点？

你就不能这样做吗-

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

或者你在寻找更干净的剑道？ 我认为，这是剑道UI中仍然存在的问题，尚未解决 见此-

您可以使用CSS:

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

---

：

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

网格数据绑定

添加以下脚本以显示消息

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

        }

//用户关联网格上的ondatabound
函数onUserAssignGridDataBound（e）{
//获取网格中的列数
var colCount=$（“#UserAssignGrid”）.find（'.k-grid-header colgroup>col'）.length；
//如果没有结果，则放置一个指示符行
if（$（“#UserAssignGrid”）.data（“kendoGrid”）.dataSource._view.length==0）{
$（“#UserAssignGrid”）.find（“.k-grid-content-tbody”）
.append（'未找到结果！'）；
}

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

---

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

    dataSource: []

现在，检查您的网格是否真正为空的正确方法是读取数据源本身。其他人通过读取html DOM以更黑客的方式进行此操作。请不要这样做，因为您可能有多个页面、筛选器等，其中项位于数据源中，而不是DOM中。以下是您应如何执行此操作：

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

    }
}

数据绑定：函数（e）{
var grid=$（“#grid”）.data（“kendoGrid”）；
var mBox=$（“#msgBox”）；
if（grid.dataSource.data（）.length==0）{
如果（！mBox.data（“kendoWindow”））{
姆博克斯·肯多文多({
操作：[“关闭”]，
动画：{
开放式：{
效果：“淡入淡出”，
持续时间：500
},
关闭：{
效果：“淡出：淡出”，
持续时间：500
}
},
莫代尔：是的，
可调整大小：false，
标题：“无物品”，
宽度：400
}).data（“kendoWindow”）.content（“没有可用的联系人。请稍后再试。
”）.center（）.open（）；
}否则{
mBox.data（“kendoWindow”）.content（“没有可用的联系人。请稍后再试。
”）.open（）；
}
}
}

上面的这些乱七八糟的东西是什么？你会注意到我正在用变量

mBox

做很多事情。这只是一个空的

，我在html页面上添加了id

msgBox

，我正在用它来实例化一个

kendoWindow

来创建一个弹出窗口，告诉你没有数据

你可以了解更多。因此，我没有使用丑陋的警报框，而是利用了剑道UI小部件库的另一部分，它是可定制和可控的

带有

mBox

的

if

和

else

逻辑只处理后续调用以显示消息。第一次，kendoWindow没有被实例化，因此它通过

if

子句。后续调用只需重新打开窗口

---

尝试一下：）。您可以单击“下一页”按钮以验证它是否会再次显示弹出窗口。下面是一个示例。

我在定义网格时使用以下方法：

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

函数显示noresultsfound（网格）{
//获取网格中的列数
var dataSource=grid.data（“kendoGrid”）.dataSource；
var colCount=grid.find（'.k-grid-header colgroup>col'）.length；
//如果没有结果，则放置一个指示符行
if（dataSource.\u view.length==0）{
grid.find（“.k-grid-content-tbody”）
.append（'未找到结果！'）；
}
//获取可见行计数
var rowCount=grid.find（'.k-grid-content-tbody tr'）.length；
//如果行数小于页面大小，请添加缺少的行数
if（行数<数据源）{
var addRows=dataSource.\u take-rowCount；
对于（var i=0；i

---

可以找到一个正在运行的演示

我知道我来晚了，但我就是这么做的。它主要是从树状列表的无数据功能复制而来的（我很恼火，你对标准网格没有相同的功能）.我把它做成了一个原型扩展，所以它会自动添加到每个网格中。还可以添加一个选项来配置消息

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

//用状态消息替换网格内容（如果您想显示“请求失败[Reload]”或类似的内容，可以在数据错误时重复使用）。
kendo.ui.Grid.prototype.\u showStatus=函数（消息）{
var status=this.content.find（“.k-status”）；
如果（！status.length）{
状态=$（“”）。appen
 // 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>');
            }
        };

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

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
}

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"
}

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

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