Kendo网格列宽+可滚动

Question

我正在尝试从javascript绑定到可滚动的kendo网格,并且列宽有一些问题.这个小提琴演示了这个问题(问题末尾的代码).我在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.c​​om /web/grid/virtualization-remote-data.html 。在网格或其父网格上有一个宽度，以及每列的宽度，它们的总和超过实际网格宽度，然后你就得到了滚动条：

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

昨天已经在您的另一篇文章中回答： Columnlines are not insync in a Kendo grid

或者

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

注意我使用的是比你更新版本的kendo 和jQuery。