剑道网格的水平滚动答案

【问题标题】：Horizontal scroll for a Kendo Grid剑道网格的水平滚动
【发布时间】：2015-07-28 20:19:52
【问题描述】：

我在剑道窗口中有一个剑道网格。如何使用包装器启用其水平滚动？

我尝试了任何方法，但都没有奏效。我尝试的最后一件事是用宽度有限的div 包围网格。

【问题讨论】：

【解决方案1】：

您是否尝试过使用冻结列，如果我要显示很多列，我更喜欢使用此功能。

【讨论】：

感谢 Dion，它更接近我想要的。但为什么它隐藏锁定的列？第二个问题是所有列都在一侧，除非我将它们拖走。
此功能有 2 个属性，locked 和 lockable。 locked 列将在左侧（全开列），否则将在右侧半隐藏，水平滚动条。如果lockable 则该列可以锁定或不锁定（可以拖动到左侧或右侧），而不是lockable 表示列保持在右侧。
无论如何我可以为所有列设置width 属性吗？你知道他们的选择器吗？
你可以找到我的答案here

【解决方案2】：

应用 Scrollable() 并为每列指定宽度，然后如果总宽度超过网格的宽度，则会出现水平滚动条。

参考

【讨论】：

我这样设置最小宽度：#MyGrid{ min-width: 700px;}。但它不起作用。我应该为每一列设置宽度吗？有更好的解决方案吗？我有几个网格，每个网格大约有 15 列。
我认为你需要这样做，因为如果你不这样做，列会自动调整
如果不需要垂直滚动，不要忘记将高度设置为"auto"：.Scrollable(s => s.Enabled(true).Height("auto"))

【解决方案3】：

这里的另一个解决方案可能是使用引导程序中的“表响应”。例如：

<div class="table-responsive">
   <div id="grid"></div>
</div>

在 kendogrid 的声明中是这样的：

$("#grid").kendoGrid({
     dataSource: dataAjax.Rotation,
     scrollable: false,
});

【讨论】：

【解决方案4】：

获得剑道网格水平滚动的简单解决方案

如果您想在整个网格上而不是在特定列上进行水平滚动，那么您可以试试这个。

使用width: 'auto'

如果网格的大小大于容器，它将显示水平滚动。

【讨论】：

【解决方案5】：

我在使用 Angular 12 时遇到了同样的问题。将 [scrollable]="true" 添加到 kendo-grid 解决了我的问题。

【讨论】：