剑道网格Angular UI水平滚动条问题答案

【问题标题】：Kendo grid Angular UI Horizontal scrollbar issue剑道网格Angular UI水平滚动条问题
【发布时间】：2018-08-02 05:39:05
【问题描述】：

如果我在剑道网格中只有一条记录，则该时间水平滚动条不起作用。

我尝试使用 CSS 解决此问题，但仍未解决。

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

【问题讨论】：

点评来源：请更好地描述问题所在。请编辑您的问题，并避免在您自己的问题中发布带有详细信息的 cmets。谢谢

标签： angular kendo-ui-angular2

【解决方案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

【讨论】：

实际上我使用的是“完美滚动条”，这就是为什么我在删除参考后遇到这个问题并且它工作正常，感谢您的时间。