title: Telerik KendoUI Angular2 Grid- Page Size drop-down not updating displayed record items in Grid
body: <p>I am trying to use Telerik's new KendoUI Angular 2 Grid control, and the drop-down that changes pageSize doesn't seem to update the size of the grid to display the amount of records selected. It changes the number of pages and the pageInfo (1-10 of 100 items), but not the grid itself. Am I doing something wrong? Following is the code snippet provided by Telerik on their site that also doesn't work in Plnkr. Thanks.</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;ul class="configurator"&gt;
        &lt;li&gt;
          &lt;label for="type"&gt;Type of the pager:
              &lt;select id="type" [(ngModel)]="type"&gt;
                  &lt;option value="numeric"&gt;Numeric&lt;/option&gt;
                  &lt;option value="input"&gt;Input&lt;/option&gt;
              &lt;/select&gt;
          &lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;label for="buttonCount"&gt;Maximum number of buttons:
              &lt;input id="buttonCount" class="k-textbox" type="number" [(ngModel)]="buttonCount"/&gt;
          &lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;label for="info"&gt;&lt;input id="info" type="checkbox" [(ngModel)]="info"&gt;Show info&lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;input id="pageSizes" type="checkbox" [(ngModel)]="pageSizes"&gt;
          &lt;label for="pageSizes"&gt;Show page sizes&lt;/label&gt;&lt;br&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;input id="previousNext" type="checkbox" [(ngModel)]="previousNext"&gt;
          &lt;label for="previousNext"&gt;Show previous / next buttons&lt;/label&gt;&lt;br&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
  
        &lt;kendo-grid
            [data]="gridView"
            [pageSize]="pageSize"
            [skip]="skip"
            [pageable]="{
              buttonCount: buttonCount,
              info: info,
              type: type,
              pageSizes: pageSizes,
              previousNext: previousNext
            }"
            [scrollable]="'none'"
            (pageChange)="pageChange($event)"
          &gt;
        &lt;/kendo-grid&gt;
    `
  })
  export class AppComponent {
      private gridView: GridDataResult;
  
      private buttonCount: number =  5;
      private info: boolean = true;
      private type: 'numeric' | 'input' = 'numeric';
      private pageSizes: boolean = true;
      private previousNext: boolean = true;
  
      private pageSize: number = 5;
      private skip: number = 0;
      private products: any[] = Array(100).fill({}).map((x, idx) =&gt; ({
          "ProductID": idx,
          "ProductName": "Product" + idx,
          "Discontinued": idx % 2 === 0
      }));
  
      constructor() {
          this.loadProducts();
      }
  
      protected pageChange({ skip }: PageChangeEvent): void {
          this.skip = skip;
          this.loadProducts();
      }
  
      protected sortChange(sort: SortDescriptor[]): void {
          this.loadProducts();
      }
  
      private loadProducts(): void {
          this.gridView = {
              data: this.products.slice(this.skip, this.skip + this.pageSize),
              total: this.products.length
          };
      }
  }
  </code></pre>