change

    Fires when the current page has changed.

    Event Data

    e.sender kendo.ui.Grid

    The widget instance which fired the event.

    Example - subscribe to the "change" event during initialization

    Open In Dojo
    <div id="pager"></div>
    
    <script>
        var dataSource = new kendo.data.DataSource({
          data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
          ],
          pageSize: 2
        });
    
        dataSource.read();
    
        $("#pager").kendoPager({
          dataSource: dataSource,
          change: function() {
    /* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("pager change event");
          }
        });
    </script>
    <style>
      #pager {
       margin-top: 100px;
      }
    </style>

    Example - subscribe to the "change" event after initialization

    Open In Dojo
    <div id="pager"></div>
    
    <script>
        function pager_change() {
    /* The result can be observed in the DevTools(F12) console of the browser. */
          console.log("pager change event");
        }
    
        var dataSource = new kendo.data.DataSource({
          data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
          ],
          pageSize: 2
        });
    
        dataSource.read();
    
        var pager = $("#pager").kendoPager({
          dataSource: dataSource
        }).data("kendoPager");
    
        pager.bind("change", pager_change);
    </script>
    <style>
      #pager {
       margin-top: 100px;
      }
    </style>
    In this article