KendoGrid：奇怪的滾動，而細節項目打開

我有一些奇怪的圖形問題滾動網格，同時打開一些細節項目。模板：KendoGrid：奇怪的滾動，而細節項目打開

<kendo-grid 
      [data]="gridView" 
      [skip]="skip" 
      [pageSize]="pageSize" 
      [scrollable]="'virtual'" 
      [rowHeight]="41" 
      [height]="700" 
      [detailRowHeight]="414" 
      (pageChange)="pageChange($event)" 
     > 
     <template kendoDetailTemplate let-dataItem> 
      <customKendoChart [chartTitle]="'A chart about '+dataItem.firstName" 
           [pollingTime]="1000" 
           [dataLength]="20"></customKendoChart> 
     </template> 
     <kendo-grid-column field="id" [width]="40" title="ID"></kendo-grid-column> 
     <kendo-grid-column field="firstName" title="First Name" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="lastName" title="Last Name" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="city" title="City" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="title" title="Title" [width]="120"></kendo-grid-column> 
     </kendo-grid>

組件：

export class KendoGridComponent { 
    private gridView: GridDataResult; 
    private gridData: any[]; 
    private skip: number = 0; 
    private pageSize: number = 30; 

    constructor() { 
     this.gridData = this.createRandomData(800000); 
     this.loadGridItems(); 
    } 

    private loadGridItems() { 
     this.gridView = { 
      data: this.gridData.slice(this.skip, this.skip + this.pageSize), 
      total: this.gridData.length 
     } 
    } 

    protected pageChange(event: PageChangeEvent): void { 
     this.skip = event.skip; 
     this.loadGridItems(); 
    } 

    private createRandomData(count: number) { 
     const firstNames = ["Riccardo", "Diego","Cristiano", "Gilberto", "Marco", "Angelo"], 
      lastNames = ["Brazorf", "Fanfoni", "Pravettoni", "Maramotti"], 
      cities = ["Ancona", "Topolinia", "Firenze", "Roma", "Jesi"], 
      titles = ["Engineer", "Manager", "CEO", "Esterno"]; 

     return Array(count).fill({}).map((_, idx) => ({ 
       id: idx + 1, 
       firstName: firstNames[Math.floor(Math.random() * firstNames.length)], 
       lastName: lastNames[Math.floor(Math.random() * lastNames.length)], 
       city: cities[Math.floor(Math.random() * cities.length)], 
       title: titles[Math.floor(Math.random() * titles.length)] 
      }) 
     ); 
    } 
}

那樣子，我每次向上或向下滾動，有這種怪異的刷新，我在其中看到一個秒老詳細條目打開，更換正確在新項目之後。這是由設計？ http://plnkr.co/edit/83IijeVTardvh4lDnmOC?p=preview

來源

2016-12-28 Dyd666

事實上，之前的內容在滾動時變得可見。發生這種情況是因爲表格的滾動位置被重置，但內容仍然呈現。也許我們可以通過在滾動時顯示某種加載面板來改善體驗。你怎麼看？

我已將此場景記入kendo-angular2回購。如果你喜歡，你可以在那裏評論。

來源

2016-12-30 13:52:05 rusev

可能是個好主意;）感謝您提出問題。 – Dyd666

加載面板會很棒。更好的plnkr（imo）在這裏，我從官方文檔中分出了plnkr並添加了一個超時模擬緩慢的web服務：http://plnkr.co/edit/KXRFimr9oSLwCLng7K3i?p=preview –

KendoGrid：奇怪的滾動，而細節項目打開

回答

相關問題