2017-09-22 9 views
0

私は、扇状の角を使って剣道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"... 

いくつかのデータ操作は(ページングのような、ソート、フィルタリングなどを同時に有効になっている場合:現在のページが正しく更新されるように

答えて

0

skipプロパティはまた、グリッドの状態にバインドする必要があります)、より便利なアプローチではなくdataStateChangeイベントを使用して、次の例のように全体の状態を操作するために次のようになります。

Grid with data operations

+0

dataStateChangeが完璧です!私はpageChangeイベントとsortChangeイベントをマージできました。 – ChristyPiffat

関連する問題