PageSizes in kendo UI grid

Question

На странице всегда отображаются параметры, такие как 5,10,20, когда мы установили pageSizes : true.

Я хочу динамически отображать его на основе количества строк, отображаемых в сетке. Использование пользовательских настроек, таких как [5,10,15,20], изменит параметры 5,10,15,20, но я хочу использовать это динамически.

Например: если общее количество строк равно 50, то параметры на странице itemsper должны быть как 10,20,30,40,50. После выполнения фильтрации количество строк может измениться на 20, поэтому соответственно на странице должно измениться до 5,10,15,20.

Возможно ли это сделать в сетке пользовательского интерфейса Kendo?

Answer 1

Да, вы можете динамически изменять PAGESIZE после выполнения Filteration

Во-первых, вам нужно захватить событие фильтра и изменение сетки размер страницы в этом случае.

Редактировать

Заканчивать ниже сценария

<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> 

я надеюсь, что это может помочь вам