Kendo ui 剑道网格列宽度+；可滚动

我试图从javascript绑定到一个可滚动的剑道网格，但在列宽方面有一些问题。这演示了问题（问题末尾的代码）。我在html中指定标题，并为其中一个标题添加宽度。javascript然后设置数据源（在生产代码中，这是通过ajax调用完成的）

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

• 我有很多网格，因为我的视图模型是精心构建的，所以能够自动识别所需的列。我们的应用程序中有100多个Gird，必须为所有Gird指定列列表将是非常麻烦的
• 反正感觉不对，这是样式信息

我知道这个功能是由于剑道创建了两个网格，一个用于标题，一个用于滚动内容。但是，我在过去使用过的其他控件库也做过类似的事情，它们总是在两个网格之间复制样式信息，以便在保持两个表同步的同时方便进行声明式样式设置——我只是不确定“剑道”的方式是什么

来自fiddle的HTML

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

CSS

---

这是一个带有水平滚动条的非常直接的网格（忽略虚拟化）。在网格或其父级上有一个宽度，每列的宽度和它们在实际网格宽度上的总和，然后得到滚动条：

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

昨天在你的另一篇文章中已经回答了：

或

---

请注意，我使用的kendo和jQuery版本比您使用的要新一点。

另一个选项是使用

和

元素以及样式/类属性。

当然可以，但我希望在标记中而不是在javascript中指定宽度。必须为每个网格指定每个列的详细信息是一项非常繁重的任务，而且（从语义上讲）指定样式是错误的。是的，我后来意识到你在说什么，与昨天的问题有点不同。您打算如何处理文本/值宽度超过20%的网格？您是否总是在列中显示相同的数据。您可以根据自己的意愿设置所有列和标题的宽度，并部署省略号（“我的不完整值…”），以避免宽度/同步差异。基本上，kendo将可滚动网格的表格布局设置为“固定”（一开始很烦人），这意味着我们的某些列太宽。我们有一些列只是状态指示器图标，我想把它们设置为只有几个像素宽。“其他所有内容”都会显示一个省略号，网格也会设置为可调整大小，如有必要，还会显示水平滚动条（有关此类功能的示例，请参阅azure管理门户上的网格）。令人遗憾的是，剑道采用了“两个网格”的方法，却没有让消费者看不到复杂性。看看我上次的编辑，你可以通过在标题和列上使用自定义属性来实现你想要的。这也解决了你的语义问题。谢谢@Bobby__________________________________，我。我仍然希望有一个解决方案，它不需要我在javascript中为每个需要一列来具有特定大小的网格创建一个列数组，但这可能是我们最好的解决方案。

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

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