如何在 Kendo UI 网格中显示空行？答案

【问题标题】：How to display empty rows in Kendo UI grid?如何在 Kendo UI 网格中显示空行？
【发布时间】：2014-12-24 10:36:09
【问题描述】：

我有一个通过 AngularJS 的 Kendo UI 网格。假设我想连续显示 10 个项目。现在，当数据少于 10 或根本没有数据时，我想显示空行，即数据是否存在，网格应该具有相同的高度显示空行。

如果数据不存在，KendoUI 会降低网格高度。因此，如果数据为零，那么目前我只得到标题，然后是分页。

$scope.testGridOptions = {
              sortable: true,
              pageable: {
                  refresh: true,
                  pageSizes: true
              },
              columns: [ ...

剑道网格中的数据和选项

 $scope.testGridData = new kendo.data.DataSource({ 
              data:[
                      { .. }, {.. } .. ], 
              pageSize : 10 
           })

如何使用 KendoUI 网格来实现？

【问题讨论】：

而不是空白行最好增加网格的高度。身高：555
实际上我想显示空白行..例如在 Excel 工作表中
设置网格高度是您最好的选择。显示空行需要在您的网格中添加空的假 <tr> 元素，这只会让您的事情变得更加混乱。
但不幸的是，要求是显示空白行！暂时我使用了假元素，但我想要一个更具体的剑道解决方案来解决这个问题

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

正如 cmets 中提到的（并且我亲身发现），尝试将空白行插入 Kendo 网格时会变得混乱。就我而言，我尝试在服务器端代码中将空/空白行插入到我的数据中。这使得客户端更容易，但 Kendo 会删除没有数据的行。作为一个黑客，我发现自己在服务器端添加了虚拟数据值，只是为了在客户端将它们删除。

另一种选择是在客户端的 JavaScript 中添加空网格行。在网格的 dataBound 事件中，您可以检查项目的数量并适当地添加行。注意：根据 Kendo 文档，网格的 addRow 方法会触发编辑事件，因此您可能必须在特定情况下处理此问题。我在下面的网格选项中添加了一个 dataBound 事件处理程序。祝你好运！

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-addRow

$scope.testGridOptions = {
sortable: true,
pageable: {
    refresh: true,
    pageSizes: true
},
dataBound: function (e) {
    var rowCount = this.dataSource.view().length;  // only get count for current page
    if (rowCount < 10) {
        for (var i = 1; i < 10 - rowCount; i++) {
            this.addRow();
        }
    }
},
columns: [ ...

【讨论】：