Kendo DataGrid+virtual scrolling does not call pagechange

I am using KendoUI's virtual scrolling in data-grid but the pageChange function is not being called. Chrome shows that an event-listener named "pageChange" is currently registered on the kendo-grid element. How do I proceed?

My template:-

<kendo-grid
          [data]="gridView"
          [skip]="skip"
          [pageSize]="pageSize"
          [scrollable]="'virtual'"
          [rowHeight]="35"
          [height]="245"
          (pageChange)="pageChange($event)"
        >....</kendo-grid>

My pageChange handler:-

protected pageChange(event: PageChangeEvent): void {
console.log("GRIDPAGECHANGE::: Event.skip: " + event.skip.toString() + ":::");
this.skip = event.skip;
this.loadGridArray(); }

My loadGridArray() function:-

loadGridArray() : void {this.gridView = {
  data: this.gridVar,
  total: this.totalRecords
};}