剑道网格的水平滚动

Posted 2023-05-07

【中文标题】剑道网格的水平滚动

【英文标题】：Horizontal scroll for a Kendo Grid

【发布时间】：2015-07-28 20:19:52

【问题描述】：

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

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

【问题讨论】：

可能是因为我的网格在剑道窗口内？

【参考方案1】：

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

Demo Section

【讨论】：

感谢 Dion，它更接近我想要的。但为什么它隐藏锁定的列？第二个问题是所有列都在一侧，除非我将它们拖走。

此功能有 2 个属性，locked 和 lockable。 locked 列将在左侧（全开列），否则将在右侧半隐藏，水平滚动条。如果lockable 则该列可以锁定或不锁定（可以拖动到左侧或右侧），而不是lockable 表示列保持在右侧。

无论如何我可以为所有列设置width 属性吗？你知道他们的选择器吗？

你可以找到我的答案here

【参考方案2】：

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

参考

Scrolling

Kendo Grid Horizontal Scroll bar

【讨论】：

我这样设置最小宽度：#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'

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

Demo

【参考方案5】：

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