New to Kendo UI for jQuery? Start a free 30-day trial

Page

events

Fired when the user is about change the current page index of DataSource via the pager UI.

The event handler function context (available via the this keyword) will be set to the widget instance.

Introduced in the Kendo UI 2016 R3 (2016.3.914) release.

page

Event Data

e.page `Number`

The selected page index.

e.preventDefault `Function`

If invoked prevents applying the changes to the DataSource.

e.sender `kendo.ui.Grid`

The widget instance which fired the event.

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      pageSize: 1,
      schema: {
        model: { id: "id" }
      }
    },
    pageable: true,
    page: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log(e.page);
    }
  });
</script>

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      pageSize: 1,
      schema: {
        model: { id: "id" }
      }
    },
    pageable: true
  });
  var grid = $("#grid").data("kendoGrid");
  grid.bind("page", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.page);
  });
</script>

Page

page

Event Data

e.page Number

e.preventDefault Function

e.sender kendo.ui.Grid

e.page `Number`

e.preventDefault `Function`

e.sender `kendo.ui.Grid`