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

Question

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

1

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

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

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

Robert Dougan 23 окт. 2018, в 15:14

Источник

Теги:

javascript

kendo-ui

kendo-grid

3 ответа

1

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

<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

Joe Glover 24 окт. 2018, в 06:26

0

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

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

Rico Koldi 24 окт. 2018, в 07:11

Ещё вопросы

Joe Glover · Accepted Answer · 2018-10-25T08-34-00.000Z

Он не похож на то, что вы хотите, доступен из коробки, но вы можете достичь этого, используя немного 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

Это, кажется, недостающее звено, и я думаю, что это заставляет "AlwaysVisible" вести себя как следует. Спасибо, что нашли время, чтобы вернуться с решением пыльника!
Не беспокойтесь, рад, что это работает для вас.