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

Kendo Grid, Horizontal scrolling and column sizing

提问by Tim

By default, kendo grids will expand to fill their containing div. Its just a table element, so by nature.

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

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

However when you add more cols (or had too many), they scale back and forth to fit. I wanted horizontal scroll bars on overflow.

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

To do this I added some code that ran on start, add and reorder.

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

  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');
  };

However Kendo seems to have its own logic that bumps against this. Colgroup entries will start being deleted, messing up everything.

然而，剑道似乎有自己的逻辑与此相悖。Colgroup 条目将开始被删除，弄乱一切。

Is there anything I can do to stop this? Is there a better way to do what I want?

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

Thanks.

谢谢。

采纳答案by OnaBai

I have a container for the table as:

我有一个桌子的容器：

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

and applied the following styles:

并应用了以下样式：

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

where you can see that I force the width to 400px and hide (and scroll) what overflows.

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

Then I define the following grid:

然后我定义以下内容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");

I get the effect that the grid overflows horizontally the size of its container.

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

See it running here

看到它在这里运行

NOTEWhat it is even nice is that pagingstays as 400px fitting always in the visible area, while the grid is actually 100 + 200 + 300 = 600(the widthof the columns)

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

EDIT:If you want the widthof the gridto be the same of the sum of the columnsthen you should add (after initializing the grid).

编辑：如果你想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');

The loop computes the total width and then I set the table to it (not need to change the columns since they are correct).

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

Set it here

在这里设置

回答by Petur Subev

You just need to ensure the Grid is scrollableand set the width of the element from which you create the Grid.

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

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

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

Hereit is in action.

这是在行动。