Telerik Kendo UI Grid分頁器未更新頁面

我正在使用Kendo UI Grid for Angular進行分頁。當我點擊一個新的頁面或箭頭時，它會調用pageChange事件來更新狀態的skip和take屬性，並調用服務來獲取新數據。但是，分頁按鈕不會更新，因此它始終顯示第一個按鈕，其中x個項目的範圍爲1 - 25個，作爲標籤。Telerik Kendo UI Grid分頁器未更新頁面

的看法是

<kendo-grid [data]="results" 
     [pageable]="pageOptions" [pageSize]="state.take" 
     [sortable]="sortOptions" [sort]="sort" 
     (pageChange)="pageChange($event)" 
     (sortChange)="sortChange($event)"> 
    <kendo-grid-column field="myField" title="Title" width="80"> 
    </kendo-grid-column>... 
</kendo-grid>

和組件

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'; 
import { CurrencyPipe, DatePipe } from '@angular/common'; 
import { Observable } from 'rxjs/Rx'; 
import { State, SortDescriptor, orderBy } from '@progress/kendo-data-query'; 
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid'; 
... 

@Component({ 
    selector: 'my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: [ 
     './my-component.component.css', 
     './../../../../node_modules/@progress/kendo-theme-material/dist/all.css' 
    ], 
    encapsulation: ViewEncapsulation.None 
}) 
export class MyComponent implements OnInit { 
    @Input() filters: any; 

    private results: GridDataResult; 

    rowOptions: any = [25, 50, 100]; 

    state: State = { 
     skip: 0, 
     take: this.rowOptions[0] 
    }; 

    pageOptions: any = { 
     buttonCount: 5, 
     info: true, 
     type: 'numeric', 
     pageSizes: this.rowOptions, 
     previousNext: true 
    }; 
    ... 

    constructor(private myService: MyService) { } 

    ngOnInit() { 
     if (this.filters) { 
      ... 
      this.state.skip = this.filters.offset || undefined; 
      this.state.take = this.filters.count || this.rowOptions[0]; 
      this.getResults(); 
     } 
    } 

    getResults() { 
     ... 
     this.myService.resultsGet(
      ... 
      this.state.take, 
      this.state.skip 
     ).subscribe(
      (pagedList: any) => { 
       this.results = { 
        data: pagedList.results, 
        total: pagedList.total 
       }; 
      }, 
      e => console.log(`error: ${e}`) 
     ); 
    } 

    protected pageChange({ skip, take }: PageChangeEvent): void { 
     this.state.skip = skip; 
     this.state.take = take; 
     this.getResults(); 
    } 
}

是否有別的東西，需要更新，以獲得分頁程序更新的結果？我沒有在GridDataResult上看到任何其他屬性（例如start或skip）來幫助解決這個問題。

提前致謝！

來源

2017-09-22 ChristyPiffat

的skip屬性也需要被結合到電網狀態，從而使當前頁面被正確地更新：如果多個數據操作同時啓用（如尋呼，排序，過濾等

<kendo-grid [data]="results" 
    [pageable]="pageOptions" [pageSize]="state.take" [skip]="state.skip" 
    [sortable]="sortOptions" [sort]="sort"...

），更方便的辦法是改用dataStateChange事件和操作就像在下面的例子中整體狀態：

Grid with data operations

來源

2017-09-23 08:35:36 topalkata

dataStateChange是完美的！我能夠合併pageChange和sortChange事件。 – ChristyPiffat

Telerik Kendo UI Grid分頁器未更新頁面

回答

相關問題