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

Question

我正在尝试在网格内容中显示友好消息(如"找不到记录,稍后再试"),此时数据库中没有记录.

从我在文档中看到的内容来看,目前无法为网格内容执行此操作.它只适用于页脚.你可以在这个小提琴中看到这个例子: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()#"
}

或通过消息选项:

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

默认文本为"无可用记录".设置noRecords时:仅限true

Answer 2

您可以使用CSS:DEMO

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

与litlle风格:

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

可在此处找到正在运行的演示

Answer 4

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

Answer 5

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

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

    dataSource: []

现在,检查网格是否真正空的正确方法是读取数据源本身.其他人通过阅读html DOM以更加黑客的方式做到这一点.请不要这样做,因为您可能有多个页面,过滤器等...项目在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.这只是一个空的<div>我在带有id的html页面上添加msgBox,我用它来实例化一个kendoWindow创建弹出窗口,说没有数据.

你可以在这里找到更多关于kendoWindow的信息.所以我没有使用丑陋的警报框,而是利用了kendo UI的小部件库的另一部分,它可以自定义和控制.

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

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

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