title: Kendo Grid data disappears on navigation button click
body: <p>I have got a Kendo grid that displays data with paging functionality enabled.</p>
  
  <p>Clicking on the page number buttons changes the page with data however on clicking on the navigation buttons (next, previous, first, last) the grid gets empty with no records available message.  </p>
  
  <p>The snippet below is my grid code:</p>
  
  <pre><code>function BindTranscript(ObjectData) {
              $("#grid").kendoGrid({
                  noRecords: true,
                  dataSource: {
                      data: ObjectData,
                      pageSize: 20,
                      schema: {
                          model: {
                              fields: {
                                  Heading: { type: "string", editable: false, nullable: true },
                                  date: { type: "string", editable: false, nullable: true },
                                  person: { type: "string", editable: false, nullable: true },
                                  Visitor: { type: "string", editable: false, nullable: true },
                                  Category: { type: "string", editable: false, nullable: true },
                                  details: { type: "string", editable: false, nullable: true }
                              }
                          }
                      },
                  },
                  // height: 550,
                  // groupable: true,
                  sortable: true,
                  pageable: true,
                  dataBound: resizeGrid,
                  scrollable: true,
                  sortable: true,
                  columns: [{
                      template: "&lt;div class='icon'&gt;" +
                      "&lt;span class='k-icon k-i-data'&gt;&lt;/span&gt;&lt;/div&gt; #: heading #",
                      field: "heading",
                      title: "heading",
                      width: 240
                  }, {
                      field: "date",
                      title: "Date"
                  },
                  {
                      field: "person",
                      title: "person"
                  },
                  {
                      field: "Visitor",
                      title: "Visitor"
                  },
                  {
                      template: "&lt;div class='category other'&gt;" +
                      "&lt;div class='cat-name'&gt;#: Category #&lt;/div&gt;&lt;/div&gt;",
                      field: "Category",
                      title: "Category"
                  },
                  {
                      field: "details",
                      title: "details"
                  }],
              });
          }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Qk9nz.png" rel="nofollow noreferrer">Object</a></p>
  
  <p><a href="https://i.stack.imgur.com/KeAY5.png" rel="nofollow noreferrer">Data Grid With Page Numbers</a></p>
  
  <p>Code Snippet for resizeGrid function:</p>
  
  <pre><code>function resizeGrid() {
              var gridElement = $("#datagrid"),
                  dataArea = gridElement.find(".k-grid-content"),
                  gridHeight = gridElement.innerHeight(),
                  otherElements = gridElement.children().not(".k-grid-content"),
                  otherElementsHeight = 0;
              otherElements.each(function () {
                  otherElementsHeight += $(this).outerHeight();
              });
              dataArea.height(gridHeight - otherElementsHeight);
          }
  </code></pre>