Kendo Grid Angular UI Horizo​​ntal滾動條問題

Question

如果我在劍道網格中只有一條記錄，那么時間水平滾動條將無法正常工作。

我嘗試使用CSS解決此問題，但仍然無法解決。

.k-grid-content {
      overflow-x: scroll !important;
}

Answer 1

只要Grid是可滾動的（默認值）並且所有設置寬度的列的寬度之和大於Grid的寬度，則水平滾動條將出現，而與項目數無關（除非有0個項目）：

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
       <kendo-grid [data]="gridData">
        <kendo-grid-column field="ProductID" width="500"></kendo-grid-column>
        <kendo-grid-column field="ProductName" width="500"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" width="500"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" width="500"></kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   public gridData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }
];

PLNKR