Grid PageSize DropDown Change Event

Environment

Product	Progress® Kendo UI® Grid for jQuery
Created with Version	2018.1.221

Description

If I change the grid pager pageSizes dropdown 'items per page', I need to get that value. Is there a way to capture the dropdown change event?

Solution

Currently the public API does not have such event for a direct event handler attachment, however, you can:

1. Find the page size dropdown list on dataBound of the grid
2. Bind the change to your custom function

    grid.one("dataBound", function(e){
        var grid = e.sender;
        var pageSizesDdl = $(grid.pager.element).find("[data-role='dropdownlist']").data("kendoDropDownList");
        pageSizesDdl.bind("change", function(ev){
            kendo.alert("PageSizes DropDown Change: " + ev.sender.value() )
        });
    });

    <div id="grid"></div>
    <script>
      var grid = $("#grid").kendoGrid({
        columns: [
          { field: "productName" },
          { field: "category" }
        ],
        dataSource: {
          data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Water", category: "Beverages" },
            { productName: "Juice", category: "Beverages" },
            { productName: "Decaffeinated Coffee", category: "Beverages" },
            { productName: "Iced Tea", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" },
            { productName: "Eggs", category: "Food" },
            { productName: "Bacon", category: "Food" },
            { productName: "Chips", category: "Food" },
            { productName: "Fish", category: "Food" }
          ],
          pageSize: 4
        },
        pageable: {
          pageSizes: true
        }
      }).data("kendoGrid");

      grid.one("dataBound", function(e){
        var grid = e.sender;
        var pageSizesDdl = $(grid.pager.element).find("[data-role='dropdownlist']").data("kendoDropDownList");
        pageSizesDdl.bind("change", function(ev){
          kendo.alert("PageSizes DropDown Change: " + ev.sender.value() )
        });
      });
    </script>