How to change page size dynamically in Kendo UI Grid

kendo-grid, kendo-ui

Solution

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
    }
});

Problem

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?

Original source