Как отображать пустые строки в сетке пользовательского интерфейса Kendo?

Question

У меня есть сетка пользовательского интерфейса Kendo через AngularJS. Скажем, я хочу отображать 10 элементов подряд. Теперь, когда есть данные менее 10 или вообще нет данных, я хочу отображать пустые строки, т. Е. Присутствуют ли данные или нет, сетка должна иметь одинаковую высоту, отображающую пустые строки.

Что KendoUI делает, что он уменьшает высоту сетки, если данных нет. Поэтому, если есть нулевые данные, в настоящее время я получаю только заголовки, а затем разбивку на страницы.

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

данных и опционами в кэндо сетки

$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: [ ...