9

默认情况下，剑道网格将扩展以填充其包含的 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 条目将开始被删除，搞砸一切。

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

谢谢。

4

2 回答 2

9

我有一个表格容器：

<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");

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

看到它在这里运行

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

编辑：如果您希望 的width与 grid的总和相同，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');

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

在这里设置

于 2013-01-16T18:14:05.940 回答
9

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

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

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

这是在行动。

于 2013-01-16T22:08:46.557 回答