kendo-ui - 剑道网格列宽+可滚动

Question

我正在尝试从 javascript 绑定(bind)到可滚动的剑道网格，并且在列宽方面存在一些问题。这个fiddle演示问题(问题末尾的代码)。我在 html 中指定标题并向其中一个标题添加宽度。然后 javascript 设置数据源(在生产代码中，这是通过 ajax 调用完成的)。

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

我有很多网格，因为我的 View 模型经过精心构造，能够自动识别所需的列。我们的应用程序中有 100 多个网格，并且必须为所有网格指定列列表会很笨拙。

无论如何感觉不对，这是样式信息。

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

来自 fiddle 的 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/

请注意，我使用的是更新版本的剑道和 jQuery，然后您就使用了。