Kendo-ui-angular2 网格在 IE 11 中的水平滚动问题

Question

我在尝试水平滚动 Kendo UI Angular2 网格时遇到 IE 11 性能不足的问题。列数可能会不时更改。至少我每次都有30列。 IE 要么冻结 UI 超过 10 秒，甚至崩溃。

我的网格版本是0.5.0。这是我的网格设置：

<kendo-grid
    [data]="view"
    [scrollable]="'virtual'"
    [height]="gridHeight"
    [pageSize]="pageSize"
    [rowHeight]="rowHeight"
    [skip]="skip"
    [sortable]="{ mode: 'multiple' }"
    [sort]="sort"
    (sortChange)="sortChange($event)"
    (pageChange)="pageChange($event)">
    <template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column
            field="{{column}}"
            [headerStyle]="{'border': 'none', 'font-size': 'medium'}"
            [width]="computeWidth(column)"
            [style]="{'border': 'none', 'font-size': 'small'}">
            <template kendoCellTemplate let-dataItem>
                <div>
                    {{dataItem[column] | truncate : 75 }}
                </div>
            </template>
        </kendo-grid-column>
    </template>
</kendo-grid>

编辑：将网格更新至 0.6.2，与 IE 相同，甚至 Chrome 思考的时间比预期的要长。例如 here

Answer 1

使用虚拟滚动时，不要将网格绑定到完整的数据（千行），而只能绑定到当前分页的数据。这就是使虚拟滚动速度更快的原因——只呈现当前可见的数据。这显示在 virtual scrolling example in the documentation.

private loadProducts(): void {
    this.gridData = {
        data: this.data.slice(this.skip, this.skip + this.pageSize),
        total: this.data.length
    };
}

参见updated plunker snippet。

Kendo-ui-angular2 网格在 IE 11 中的水平滚动问题

Kendo-ui-angular2 grid Horizontal scrolling issue in IE 11

kendo-grid

kendo-ui-angular2

angular