PageSizes in kendo UI grid

Question

Items per page is always showing options like 5,10,20 when we set pageSizes : true.

I want to display it dynamically based on the number of rows displaying in the grid. Using custom settings like [5,10,15,20] will change the options 5,10,15,20 but I want to use this dynamically.

For example: if the total number of rows are 50, then the options in itemsper page should be like 10,20,30,40,50. After doing filtering, the number of rows may change to 20, then accordingly items per page should change to 5,10,15,20.

Is it possible to do this in a Kendo UI grid?

Are you creating your grid in JavaScript and not the Razor syntax? If so - try http://stackoverflow.com/a/11345574/1057803 — loxdog, Oct 13 '14 at 08:16
possible duplicate of [How to change page size dynamically in Kendo UI Grid](http://stackoverflow.com/questions/11330474/how-to-change-page-size-dynamically-in-kendo-ui-grid) — loxdog, Oct 13 '14 at 08:17
it explains changing the items per page.I want to know how to change the drop down value dynamically `pagesizes` not `pagesize` option . — Orchid, Oct 14 '14 at 05:21

Abbas Galiyakotwala · Answer 1 · 2014-10-14T06:57:13.173

Yes You can dynamically change PageSize after doing filteration

Firstly you need to capture filter event and change grid page size in that event.

Edit

Check out below script

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

i hope this may help you

I want to know how to change the drop down value dynamically for choosing items per page.`pagesize` is dynamically changing. But drop down values are not able to change dynamically. that is `pagesizes` option — Orchid, Oct 14 '14 at 05:25
Inorder to choose items per page i have to change the drop down value. However when i clicking the items per page drop down it showing 5,10,20. If the total number of records are 100, items per page is 10, then the pagination will be 1,2..10. Using filter I got 10 records out of 100,accordingly pagination changes to only one 1,but iems per page still have drop down list like 5,10,20. If the total result itself 10 records,then what s the need to show 20. The eg which you gave also not dynamic where you are assigning default values for drop down. — Orchid, Oct 14 '14 at 11:52

score 0 · Answer 2 · edited Oct 29 '18 at 06:14

0

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

Add this content in your kendo grid ajax code.. This code give you an options that how many records you want to display and with that pagination is automatically set.

edited Oct 29 '18 at 06:14

core114

5,155
16
92
189

answered Oct 29 '18 at 05:37

heta naik

1
1

1

when your drop down values are chnage accordingly your result should change. right ? this 3 lines refresh again so your 20 data set as 5,10,15 and 20 based on your dynamically select per page record 5 – heta naik Oct 29 '18 at 05:44

PageSizes in kendo UI grid

2 Answers2