Question

我有一些奇怪的图形问题滚动网格，同时打开一些细节项目。模板：

<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

Answer 1

确实，之前的内容在滚动时变得可见。之所以发生这种情况是因为表的滚动位置被重置，但内容仍然呈现。也许我们可以通过在滚动时显示某种加载面板来改善体验。你觉得怎么样？

我已在kendo-angular2 repo中记录了此方案。如果你愿意，你可以在那里发表评论。

KendoGrid：细节项目打开时奇怪的滚动

1 个答案: