使用角度剑道列表视图不显示任何结果

Display no results using Angular Kendo for kendo list view

本文关键字：视图 显示 任何 结果 列表      更新时间：2023-09-26

我正在使用Angular Kendo并构建一个列表。 

<kendo-mobile-list-view id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
</kendo-mobile-list-view>

我正在使用剑道DataSource和ObservableArray为我的服务中的列表生成数据。 

this.myDataSource = new kendo.data.DataSource({ data:this.myObservableArray });
this.myObservableArray.push({ key: "test", id:"test" });

一切都按预期工作。

现在，我想在没有要显示

的记录时显示一条消息，在我显示列表的位置，例如"没有要显示的记录，请刷新"。

如何使用角度剑道来实现这一点。
我看到剑道JQuery的帖子很少，但没有Angular Kendo的解决方案。

定义网格

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

首先，你应该为你的剑道实例添加一个名称（ myList ）：

<kendo-mobile-list-view="myList" id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
    </kendo-mobile-list-view>

然后，在控制器中：

$scope.myList.bind('dataBound',DisplayNoResultsFound)

您也可以在html中指定一些k-options并从角度控制器读取这些选项（包括dataBound），此链接对此进行了更多说明

相关文章：