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：奇怪的滚动，而细节项目打开

回答

相关问题