Как изменить размер страницы в кэндо mvc в соответствии с размером экрана?

Question

Я хочу знать, есть ли у вас какое-либо решение для динамического c изменения PageSize?

Если я раскрою свой вопрос, я хочу показать свою сетку в 10 элементах по умолчанию, но когда я хочу показать ее на большом экране я хочу показать 20 или 30 элементов?

Есть ли какое-то решение для этого?

Answer 1

Существует два случая: начальный набор pageSize по высоте окна и набор по изменению размера окна pageSize.

При загрузке страницы выберите размер окна и установите размер страницы в соответствии с высотой:

var pageSize = 10;
var windowHeight = $(window).height();

console.log(windowHeight)

switch(true) {
  case windowHeight < 500:
    pageSize = 5;
    break;
  case windowHeight < 600:
    pageSize = 10;
    break;
  case windowHeight < 700:
    pageSize = 15;
    break;
} 

$("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: {
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Water", category: "Beverages" },
        { productName: "Juice", category: "Beverages" },
        { productName: "Decaffeinated Coffee", category: "Beverages" },
        { productName: "Iced Tea", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" },
        { productName: "Eggs", category: "Food" },
        { productName: "Bacon", category: "Food" },
        { productName: "Chips", category: "Food" },
        { productName: "Fish", category: "Food" }
      ],
      pageSize: pageSize
    },
    pageable: {
      pageSizes: true
    }
  });

Если вы изменяете размер окна вручную, отслеживайте событие изменения размера и изменяйте размер страницы сетки:

  $(window).resize(function() {
    var windowHeight = $(window).height();

    console.log(windowHeight)

    switch(windowHeight) {
      case 440:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(5);
        grid.refresh();
        break;
      case 590:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(10);
        grid.refresh();
        break;
      case 700:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(15);
        grid.refresh();
        break;
      }
  });

Пример: Размер страницы по высоте

ПРИМЕЧАНИЕ: Я не пользователь C# или asp. net или кендо для asp, поэтому я не совсем уверен, будет ли это работать в вашем случае. Кроме того, это надежный пример, вам нужно будет адаптировать его для ваших случаев