如何以编程方式设置 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 中调试时，grid.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屋！