【问题标题】:KendoGrid: weird scrolling while detail item is openKendoGrid:详细信息项打开时出现奇怪的滚动
【发布时间】:2016-12-28 09:29:48
【问题描述】:

在打开一些详细项目时,我在滚动网格时遇到了一些奇怪的图形问题。 模板:

<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

【问题讨论】:

    标签: kendo-grid kendo-ui-angular2


    【解决方案1】:

    确实,上一个内容在滚动时变得可见。发生这种情况是因为表格的滚动位置被重置,但内容尚未呈现。也许我们可以通过在滚动时显示某种加载面板来改善体验。你怎么看?

    我已经在kendo-angular2 repo 中记录了这个场景。喜欢的可以评论。

    【讨论】:

    猜你喜欢
    • 2016-05-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多