Question

我正在尝试从javascript绑定到可滚动的kendo网格，并且列宽有一些问题。这个fiddle演示了这个问题（问题末尾的代码）。我在html中指定标题并为其中一个标题添加宽度。然后javascript设置dataSource（在生产代码中，这是通过ajax调用完成的。）

我想避免在javascript中设置columns.width属性，因为

我有很多网格，因为我的视图模型经过精心构建，能够自动识别所需的列。我们的应用程序中有100多个网格，并且必须为所有这些网站指定列列表都很笨重。
无论如何感觉不对，这是造型信息。

我确实理解该功能是由于kendo创建了两个网格，一个用于标题，另一个用于滚动内容。但是，我过去使用的其他类似控件的libs总是复制两个网格之间的样式信息，以便在保持两个表同步的同时促进声明式样式 - 我只是不确定“kendo”是什么对此的方式是。

来自小提琴的HTML

<table>
    <thead>
        <th class="p20" data-field="status">Status</th>
        <th data-field="description">Description</th>
    </thead>
</table>

的Javascript

$('table').kendoGrid({
    dataSource: [
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' }
    ],
    scrollable: true
});

CSS

.k-grid-content {
    height: 100px;
}
.p20 {
    width: 20%;
}

Answer 1

这是一个非常直接的网格，带有水平滚动条（忽略虚拟化）http://demos.kendoui.com/web/grid/virtualization-remote-data.html。在网格上有一个宽度，或者每列的父级和宽度，以及它们在实际网格宽度上的总和，然后得到滚动条：

{ field: "OrderID", title: "Order ID", width: 60 },

昨天已在你的另一篇文章中回答： Column lines are not in sync in a Kendo grid

或

http://jsfiddle.net/vojtiik/2ApvC/3/

注意我正在使用比较新版本的kendo和jQuery。

Answer 2

另一种选择是将<colgroup/>和<col/>元素与样式/类属性一起使用。

Kendo网格列宽+可滚动

2 个答案: