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

当我尝试在水平方向上滚动Kendo UI Angular2网格时，我遇到了IE 11性能的不足。不时的列数可能会改变。至少我每次有30列。 IE会冻结UI超过10秒，甚至崩溃。Kendo-ui-angular2 grid在IE 11中水平滚动的问题

我的网格版本是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浏览器甚至想比预期更长的同样的事情。示例为here

来源

2016-11-21 Max Kilovatiy

你能否提供一个可运行的示例，显示'computeWidth'函数和至少一行模拟数据？ –

请提供一些说明如何执行此操作？ –

您可以使用[文档站点]（www.telerik.com/kendo-angular-ui/components/grid/）上的一个示例中的“Open in Plunker”按钮来引导示例。然后，您可以将代码添加到'app/app.component.ts'文件中，直到plunker显示问题。 –

使用虚拟滚动时，不要将网格绑定到完整数据（成千上万行），而只能绑定到当前分页的数据。这就是让虚拟滚动更快的原因 - 只显示当前可见的数据。这显示在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。

来源

2016-11-24 12:24:53

谢谢！那么在0.6.2版本中过滤和排序呢？ –

您可以使用[DataQuery包]（http://www.telerik.com/kendo-angular-ui/components/dataquery/）来处理数据。查看[排序示例]（http://www.telerik.com/kendo-angular-ui/components/grid/#sorting）。过滤用户界面尚不可用 - 它将在未来的版本中引入。 –

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

回答

相关问题