How to change page size dynamically in Kendo UI Grid

Question

I am having a Kendo UI grid showing more than 1000 data. I also have a dropdown list for different page size - 15, 25, 50, 100. On selection of a page size, how can we change the page size of Kendo UI grid?

score 20 · Accepted Answer · edited Sep 28 '12 at 09:33

You can set the page size in the combobox change event. (Also see JSBin example.)

$("#comboBox").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: 1 },
        { text: 2 },
        { text: 3 },
        { text: 4 },
        { text: 5 }
    ],
    change: function(e) {
      var grid = $("#grid").data("kendoGrid");
      grid.dataSource.pageSize(parseInt(this.value()));  // this.value() being the value selected in Combo
    }
});

score 20 · Answer 2 · answered Jul 10 '13 at 22:52

20

Here's the latest using ASP.NET MVC Helper

.Pageable(pager => pager.PageSizes(new int[] {20, 50, 100})) // Enable paging

answered Jul 10 '13 at 22:52

Rick Glos

2,466
2
29
30

That's great. Any idea how you could add 'All'? – David C Oct 03 '13 at 08:30
1

@DavidC did you ever figure out how to add 'All' option? – sanjeev40084 May 19 '15 at 20:59
`.Pageable(pager => pager.PageSizes(new int[] { 20, 50, 100, "All" }))` – RichC Sep 02 '15 at 13:52
@RichC, Adding "All" to an int[] throws an error. If I add 0, it will show all. I'm still trying to figure out how to add "All" using razor without having to use extra javascript to do it. – Darrell Lloyd Harvey Jan 11 '16 at 07:15
Ah - might can only do it in javascript... `$("#pager").kendoPager({ dataSource: dataSource, pageSizes: [2, 3, 4, "all"] });` – RichC Jan 12 '16 at 14:07

score 15 · Answer 3 · answered Aug 01 '12 at 13:51

15

Its also built into the latest version of the grid by doing the following in js

pageable: {
    pageSizes: [10, 25, 50, 100]
}

http://docs.kendoui.com/api/web/pager

answered Aug 01 '12 at 13:51

Cragly

3,554
9
45
59

score 2 · Answer 4 · answered Oct 09 '14 at 18:25

Rick has told it in a good way a more explained if some one misses where is it to be done here is a code piece to know where is it to be done with a screen short snap

@(Html.Kendo().Grid(Model)
      .Name("SiteUserGrid")
      .Columns(columns =>
          {
              columns.Bound(u => u.LastName).Title("Last Name");
              columns.Bound(u => u.FirstName).Title("First Name");
              columns.Bound(u => u.UserName).Title("User Name");
              columns.Bound(u => u.EmailAddress).Title("Email Address");
              columns.Bound(u => u.AccessLevel).Title("Access Level");
              columns.Bound(u => u.Status).Title("Status");
              columns.Bound(u => u.UserId).Filterable(f => f.Enabled(false)).ClientTemplate(actionColumnTemplate).Title("Action").Sortable(false).Width(190);
          })
      .Pageable(pageable => pageable.ButtonCount(10))

.Pageable(pager => pager.PageSizes(new int[] {5,10,15,20,30,50,100}))

      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
      .Sortable()
      .Filterable(filterable => filterable
                                    .Extra(false)
                                    .Operators(operators => operators
                                                                .ForString(str => str.Clear()
                                                                                     .StartsWith("Starts with")
                                                                                     .Contains("Contains")
                                                                                     .IsEqualTo("Is equal to")
                                                                ))

Hope this helps

score 2 · Answer 5 · edited May 23 '17 at 11:54

2

To expand on Rick Glos' answer:

You can set the Pageable PageSizes to an array of generic objects, so you can have an "All" option without having to set pageSizes in JavaScript.

.Pageable(pager => pager.PageSizes(new object[] {20, 50, 100, "All"}))

edited May 23 '17 at 11:54

Community

1
1

answered Mar 18 '16 at 17:35

nbrosz

874
12
18

score 1 · Answer 6 · answered Dec 13 '13 at 01:26

1

http://docs.kendoui.com/api/wrappers/php/Kendo/UI/GridPageable

$pageable = new \Kendo\UI\GridPageable();
$pageable->pageSizes(array(20,50,100));

answered Dec 13 '13 at 01:26

Peter Truong

41
3

How to change page size dynamically in Kendo UI Grid

6 Answers6

.Pageable(pager => pager.PageSizes(new int[] {5,10,15,20,30,50,100}))

Linked