如何以编程方式设置Kendo UI网格列宽 [英] How to set Kendo UI grid column widths programmatically

问题描述

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

I would like to set Kendo UI grid column widths programmatically. I am using the following code:

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

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

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?

推荐答案

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

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 different colgroups.

另请注意：我不想使用grid.setOptions，因为它的局限性，破坏附加事件和标题（如果使用ASP MVC帮助器渲染网格）

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)

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网格列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！