Telerik Kendo UI Grid Paginator ne pas mettre à jour la page sélectionnée

Question

J'utilise la grille UI Kendo pour Angulaire avec pagination. Lorsque je clique sur une nouvelle page ou une nouvelle flèche, elle appelle l'événement pageChange qui met à jour les propriétés skip et take de l'état et appelle un service pour obtenir les nouvelles données. Toutefois, les boutons de mise en page ne sont pas mis à jour. Par conséquent, le premier bouton sélectionné apparaît toujours avec une plage de 1 à 25 éléments x comme libellé.

La vue est

<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> 

Et composant

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(); 
    } 
} 

Y at-il quelque chose d'autre qui a besoin d'être mis à jour pour obtenir la paginator de mettre à jour les résultats? Je n'ai pas vu d'autres propriétés sur le GridDataResult (comme start ou skip) pour aider à cela.

Merci d'avance!

Answer 1

La skip propriété doit également être lié à l'état de grille, de sorte que la page en cours est mis à jour correctement:

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

Si plusieurs opérations de données sont activées simultanément (comme la pagination, le tri, le filtrage, etc.), l'approche plus pratique serait d'utiliser l'événement dataStateChange au lieu et à manipuler l'ensemble de l'Etat comme dans l'exemple suivant:

Grid with data operations