Kendo UI網格中的PageSizes

Question

當我們設置pageSizes : true時，每頁項目始終顯示諸如5,10,20之類的選項。

我想根據網格中顯示的行數動態顯示它。 使用[5,10,15,20]之類的自定義設置會更改選項5,10,15,20，但我想動態地使用它。

例如：如果總行數為50，則每頁項目中的選項應為10、20、30、40、50。 進行過濾后，行數可能會更改為20，然后相應地每頁項目應更改為5,10,15,20。

是否可以在Kendo UI網格中執行此操作？

Answer 1

是的，您可以在執行過濾后動態更改PageSize

首先，您需要捕獲過濾器事件並在該事件中更改網格頁面大小。

編輯

查看以下腳本

<input id="ddPageSize" />
<div id="grid"/>
<script>
        var data_10plus = [
                    { text: "10", value: "10" },
                    { text: "20", value: "20" },
                    { text: "30", value: "30" },
                    { text: "40", value: "40" },
                    { text: "50", value: "50" }
                ];
        var data_5plus = [
                    { text: "5", value: "5" },
                    { text: "10", value: "10" },
                    { text: "15", value: "15" },
                    { text: "20", value: "20" }
                ];
 $(document).ready(function () {

    var grid = $("#grid").kendoGrid({  //your grid
     ..
     ..
    }).data("kendoGrid");

    $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_10plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
     });

    grid.dataSource.originalFilter = grid.dataSource.filter;

    grid.dataSource.filter = function () {   // Replace the original filter function. 
      var result = grid.dataSource.originalFilter.apply(this, arguments);
      if (arguments.length > 0) {
         this.trigger("afterfilter", arguments);
      }
      return result;
     }

    grid.dataSource.bind('afterfilter', function (e) {   
      var count = $("#grid").data("kendoGrid").dataSource.total();
      if (count < 20){
         $("#grid").data("kendoGrid").dataSource.pageSize(parseInt("5"));
         $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_5plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
            });
       }
      else{
         $("#grid").data("kendoGrid").dataSource.pageSize(parseInt("10"));
         $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_10plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
            });
      }
     });

 });
 </script>

希望對您有幫助

Answer 2

 pageable: {
           refresh: true,
           pageSizes: true,
           buttonCount: 5
           }

將此內容添加到kendo網格ajax代碼中 。此代碼為您提供一個選項，該選項可以自動設置要顯示的記錄數量以及分頁方式。