如何以编程方式设置 Kendo UI 网格列宽

Question

我想以编程方式设置 Kendo UI 网格列宽。我正在使用以下代码：

function setColumnWidths(grid, options) {
    for (var i = 0; i < options.columns.length; i++) {
        grid.columns[i].width = options.columns[i].width;
    }
}

在语句执行后在 chrome 中进行调试时，grid.columns[i].width 似乎已适当地设置为新值，但是 GUI 中没有任何变化，列宽保持不变。我错过了什么？

Answer 1

您需要通过其元素而不是其定义来更改网格的宽度。 Kendo 网格包含 header 和内容，因此您需要更改两个元素。

改用此代码

$("#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);

Sample

Answer 2

我已经结束了。 Dion 的解决方案让我开始有了使用列组的想法，但是该解决方案仅限于没有锁定列，不同列组中的内容。

另请注意：我不想使用 grid.setOptions，因为它的局限性会破坏附加事件和 header（在使用 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]);
}

如何以编程方式设置 Kendo UI 网格列宽

How to set Kendo UI grid column widths programmatically

javascript

kendo-ui

kendo-grid