Question

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

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

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

Kendo网格中的数据和选项

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

如何使用KendoUI网格实现这一目标？

Answer 1

正如评论中提到的那样（正如我自己亲自发现的那样），当尝试在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: [ ...

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

1 个答案: