私は、扇状の角を使って剣道UIグリッドを使用しています。新しいページや矢印をクリックすると、状態のスキップとプロパティを更新するpageChangeイベントが呼び出され、新しいデータを取得するためのサービスが呼び出されます。ただし、改ページボタンは更新されないため、常に最初のボタンがラベルとしてx項目の1〜25の範囲で選択されているように見えます。Telerik Kendo UIグリッドページングが選択されていないページを更新していません
ビューが
<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の他のプロパティ(開始やスキップなど)がこれを助けるのを見たことがありませんでした。
ありがとうございます!
<kendo-grid [data]="results"
[pageable]="pageOptions" [pageSize]="state.take" [skip]="state.skip"
[sortable]="sortOptions" [sort]="sort"...
いくつかのデータ操作は(ページングのような、ソート、フィルタリングなどを同時に有効になっている場合:現在のページが正しく更新されるように
dataStateChangeが完璧です!私はpageChangeイベントとsortChangeイベントをマージできました。 – ChristyPiffat