javascript 如何以编程方式设置 Kendo UI 网格列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30150168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Kendo UI grid column widths programmatically
提问by g.pickardou
I would like to set Kendo UI grid column widths programmatically. I am using the following code:
我想以编程方式设置 Kendo UI 网格列宽。我正在使用以下代码：
function setColumnWidths(grid, options) {
for (var i = 0; i < options.columns.length; i++) {
grid.columns[i].width = options.columns[i].width;
}
}
When debugging in chrome after the statements executed, grid.columns[i].width seems to be appropriately set to the new value, however nothing changes in the GUI, the column widths remain the same. What am I missing?
在执行语句后在 chrome 中调试时，grid.columns[i].width 似乎被适当地设置为新值，但是 GUI 中没有任何变化，列宽保持不变。我错过了什么？
采纳答案by g.pickardou
I've ended with this. Dion's solution gave me starting idea about using colgroups, however that solution is limited to not having locked columns, what are in differentcolgroups.
我已经结束了。Dion 的解决方案让我开始了解使用 colgroups，但是该解决方案仅限于没有锁定列，不同colgroups 中的列。
Also note: I do not want to use grid.setOptions, because its limitations, ruining attached events and header (in case of using ASP MVC helper to render the grid)
另请注意：我不想使用 grid.setOptions，因为它的局限性，破坏了附加的事件和标题（在使用 ASP MVC 帮助程序呈现网格的情况下）
function setColumnWidths(grid, options) {
var lockedCount = 0;
for (var i = 0; i < options.columns.length; i++) {
if (options.columns[i].hasOwnProperty('locked')) {
if (options.columns[i].locked) {
lockedCount++;
}
}
}
for (var i = 0; i < options.columns.length; i++) {
var width = options.columns[i].width;
grid.columns[i].width = width;
if (options.columns[i].hasOwnProperty('locked') && options.columns[i].locked) {
$("#grid .k-grid-header-locked").find("colgroup col").eq(i).width(width);
$("#grid .k-grid-content-locked").find("colgroup col").eq(i).width(width);
} else {
$("#grid .k-grid-header-wrap").find("colgroup col").eq(i-lockedCount).width(width);
$("#grid .k-grid-content").find("colgroup col").eq(i - lockedCount).width(width);
}
}
// Hack to refresh grid visual state
grid.reorderColumn(1, grid.columns[0]);
grid.reorderColumn(1, grid.columns[0]);
}
回答by Dion Dirza
You need to change grid's width through its element instead of its definition. Kendo grid contains header and content, so you need to change two elements.
您需要通过其元素而不是其定义来更改网格的宽度。剑道网格包含标题和内容，因此您需要更改两个元素。
Use this code instead
改用此代码
$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy);
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy);
