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中水平滾動的問題

回答

相關問題