使用 Angular Kendo 进行剑道列表视图不显示任何结果

Posted 2023-05-07

【中文标题】使用 Angular Kendo 进行剑道列表视图不显示任何结果

【英文标题】：Display no results using Angular Kendo for kendo list view

【发布时间】：2016-07-02 12:51:09

【问题描述】：

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

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

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

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

一切都按预期工作。

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

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

【参考方案1】：

定义网格

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

【讨论】：

感谢您提供示例代码，但我正在寻找 Angular Kendo。所以诀窍在于数据绑定。然后在函数中我们需要检查数据源长度。

另外，看起来你已经发布了这个问题的答案，***.com/questions/23476978/… 我已经看到了。

【参考方案2】：

首先，您应该为您的剑道实例添加一个名称(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 并从角度控制器 this link explains more about it 中读取这些选项（包括 dataBound）