剑道网格，水平滚动和列大小

Posted 2023-05-07

【中文标题】剑道网格，水平滚动和列大小

【英文标题】：Kendo Grid, Horizontal scrolling and column sizing

【发布时间】：2012-12-31 01:24:14

【问题描述】：

默认情况下，剑道网格将扩展以填充其包含的 div。它只是一个表格元素，所以本质上是这样。

<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>

但是，当您添加更多列（或太多列）时，它们会来回缩放以适应。我想要水平滚动条溢出。

为此，我添加了一些在启动、添加和重新排序时运行的代码。

  this._initWidths = function () 
     var totalWidth = 0;
     for (var i = 0; i < grid.columns.length; i++) 
        var width = grid.columns[i].width;
        $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
        $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
        totalWidth = totalWidth + width;
     
     table.css('width', totalWidth + 'px');
  ;

然而，剑道似乎有自己的逻辑来反对这一点。 Colgroup 条目将开始被删除，搞砸一切。

我能做些什么来阻止这种情况吗？有没有更好的方法来做我想做的事？

谢谢。

【参考方案1】：

我有一个表格容器：

<div id="myWindow">
    <div id="myGrid"></div>
</div>

并应用了以下样式：

#myWindow 
    width: 400px;
    overflow-x: scroll;

您可以看到我将宽度强制设置为 400 像素并隐藏（和滚动）溢出的内容。

然后我定义如下grid：

var grid = $("#myGrid").kendoGrid(
    dataSource : 
        data    : entries,
        schema  : 
            model: 
                id: "city"
            
        ,
        pageSize: 5
    ,
    columns    : [
         field: "city", title: "City", width: 100 ,
         field: "time", title: "Time", format: "0:HH:mm", width: 200,
         field: "datetime", title: "Date - Time", format: "0:yyyy-MM-dd HH:mm", width: 300 
    ],
    sortable   : 
        mode       : "single",
        allowUnsort: false,
        field      : "city"
    ,
    editable   : "popup",
    navigatable: true,
    pageable   : true
).data("kendoGrid");

我得到网格水平溢出其容器大小的效果。

看到它运行here

注意 更棒的是paging始终保持在可见区域内的400px，而网格实际上是100 + 200 + 300 = 600（columns的width）

编辑：如果您希望grid 的width 与columns 的总和相同，那么您应该添加（在初始化网格之后）。

var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) 
  var width = grid.columns[i].width;
  totalWidth = totalWidth + width;

grid.element.css('width', totalWidth + 'px');

循环计算总宽度，然后我将表格设置为它（不需要更改列，因为它们是正确的）。

设置here

【讨论】：

好的，谢谢，这是我想要的一半。如果列宽很短，如何防止剑道扩大以填充空间？假设您将 Time 设置为 50，将 datetime 设置为 100。Kendo 会扩展它们。我怎么能阻止它？再次感谢。

请看 EDIT 基本上是您在 for 循环中所做的，但有点简化。

抱歉没有回复。我最终写了类似的东西。然而，像这样改变网格元素会看起来很奇怪。相反，我更改了表格... grid.table.css('width', totalWidth + 'px');然后是头。标记为答案，因为这很接近。

【参考方案2】：

您只需要确保 Grid 是可滚动并设置创建 Grid 的元素的宽度。

<div id="myGrid" style='width:500px;'></div>

var grid = $("#myGrid").kendoGrid(
    scrollable:true,
    //...
)

Here 正在行动中。

【讨论】：

true 不是scrollable 的默认值吗？你为什么把它作为答案的一部分？在您的回答中，唯一重要的是定义包含表格的 div 的宽度。

@OnaBai 快速浏览一下 Kendo 文档会产生大量关于 scrollable 的警告：“默认情况下，除了小部件 MVC 包装器”。这是一个很好的提醒，不要总是依赖默认值，而且，无论如何在答案中明确设置它有什么害处？

@ProfK，我的评论是因为将某些东西初始化为默认值不应该解决问题。如果问题得到解决实际上是因为其他原因。在这种情况下，解决问题的方法是使用“div”来包含我之前的答案（及时）已经包含的网格。