3

Please find attached code and let me know the possible reason for the error i am getting while running the code in Angular CLI. This error will gone if i remove the [pageSize]="5" but that will not show default page size in dropdown. Requirement is like to show second pager on top of Grid

enter image description here

<kendo-grid #grid class="k-grid-expand-row inner-grid" [kendoGridBinding]="gridData" [height]="530" [pageSize]="5" [skip]="skip" [pageable]="true" [sortable]="true" [filterable]="IsFilterVisible" (pageChange)="onPageChange($event)" [selectable]="{enabled: true, checkboxOnly: true}"
  [loading]="loading" [selectedKeys]="selectedItems" [resizable]="true" [kendoGridSelectBy]="selectionKey" (cellClick)="rowClick($event)">
  <ng-template kendoGridToolbarTemplate position="top">
    <div class="d-flex k-grid-toolbar-content ">
      <div class="pagination-container">
        <p>Show</p>
        <kendo-pager-page-sizes [pageSizes]="[5,10,20,40]"></kendo-pager-page-sizes>
          <kendo-pager-prev-buttons id="ibtPagination Button"></kendo-pager-prev-buttons>
          <kendo-pager-input></kendo-pager-input>
          <kendo-pager-next-buttons id="ibtPagination Button"></kendo-pager-next-buttons>
    </div>
    </div>
  </ng-template>
  <kendo-grid>
Bh00shan
  • 488
  • 6
  • 20

2 Answers2

2

I added the below code in component class.

constructor(public cdRef: ChangeDetectorRef) { }

ngAfterViewInit() {
this.cdRef.detectChanges();
}

And it solved my issue.

Bh00shan
  • 488
  • 6
  • 20
0

There an issue with Kendo UI grid with pageSize property. Update the package to 4.1.0 version would fix this.

Ethan Vu
  • 2,911
  • 9
  • 25