Edit this page

Load the Last Grid Page by Default


Product Version 2017.1 117
Product Progress Kendo UI Grid


How can I make the Grid show its last page by default?


  1. Handle the first dataBound event of the Grid.
  2. In the event handler:

    1. Get the length of the items by using the data method of the dataSource.
    2. Get the current page size by using the pageSize method of the dataSource.
    3. Divide these numbers, parse, and increment the result. Use the final result to set the new pageSize.

      <div id="example">
          <div id="grid"></div>
              $(document).ready(function() {
                      dataSource: {
                          type: "odata",
                          transport: {
                              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                          pageSize: 20
                      height: 550,
                      groupable: true,
                      sortable: true,
                      pageable: {
                          refresh: true,
                          pageSizes: true,
                          buttonCount: 5
                      columns: [{
                          field: "ContactName",
                          title: "Contact Name",
                          width: 240
                      }, {
                          field: "ContactTitle",
                          title: "Contact Title"
                      }, {
                          field: "CompanyName",
                          title: "Company Name"
                      }, {
                          field: "Country",
                          width: 150
                  var grid = $("#grid").data("kendoGrid");
                  grid.one("dataBound", function(e) {
                      var dataSource = e.sender.dataSource;
                      var items = dataSource.data().length;
                      var pageSize = dataSource.pageSize();
                      var pageNum = parseInt(items / pageSize) + 1;
      <style type="text/css">
          .customer-photo {
              display: inline-block;
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background-size: 32px 35px;
              background-position: center center;
              vertical-align: middle;
              line-height: 32px;
              box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, .2);
              margin-left: 5px;
          .customer-name {
              display: inline-block;
              vertical-align: middle;
              line-height: 32px;
              padding-left: 3px;
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article