Как я могу скрыть пейджер в Kendo UI Grid, если для autoBind установлено значение false?

Question

У меня есть Kendo UI Grid, для свойства auto-bind которого установлено значение false.Я также установил для свойства pageable.alwaysVisible значение false, чтобы скрыть пейджер сетки, когда он не нужен.

Проблема, с которой я сталкиваюсь, заключается в том, что поскольку сетка не привязана к данным при первой загрузке,Свойство AlwaysVisible не работает, и отображается пейджер.На этом этапе я бы ожидал, что пейджер будет скрыт, поскольку нет данных для разбивки на страницы.

Есть ли в любом случае я могу скрыть пейджер при первой загрузке, когда сетка не привязана к данным?

Answer 1

Это похоже на причуду сетки, когда она не знает, что у нее еще нет данных.Возможно, вы могли бы попытаться вставить «нет данных» в ваш источник данных в первую очередь?Следующий фрагмент демонстрирует вашу проблему;снятие комментария с последней строки исправляет это:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: new kendo.data.DataSource(),
        pageable: {
            pageSize: 5,
            alwaysVisible: false
        },
        autoBind: false,
    });
    //$("#grid").data("kendoGrid").dataSource.data([]);
</script>

Пример здесь: https://dojo.telerik.com/OZAXugOt

Answer 2

Не похоже, что то, что вы хотите, доступно из коробки, но вы можете достичь этого, используя немного CSS.Это, вероятно, лучший подход, чем мой предыдущий ответ, который по сути спровоцировал сетку, чтобы в любом случае связать себя.Как насчет скрытия пейджера до тех пор, пока сетка не будет в конечном итоге привязана, и в этот момент он берет на себя управление видимостью пейджера?

<style>
  #grid>.k-pager-wrap.k-grid-pager {
    display: none;
  }
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" }
    ],
    pageable: {
      pageSize: 3,
      alwaysVisible: false
    },
    autoBind: false
  });
</script>

Пример здесь: https://dojo.telerik.com/EBaZAjAc

Answer 3

Вы можете использовать что-то вроде этого:

dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
  e.sender.pager.element.hide();
} else {
  e.sender.pager.element.show();
}

Взгляните на этот пример: http://dojo.telerik.com/OhEDo