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

Posted 2023-05-07

【中文标题】如何以编程方式设置 Kendo UI 网格列宽

【英文标题】：How to set Kendo UI grid column widths programmatically

【发布时间】：2015-07-20 22:11:05

【问题描述】：

我想以编程方式设置 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 中没有任何变化，列宽保持不变。 我错过了什么？

【参考方案1】：

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

改用此代码

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

【讨论】：

谢谢。我想我们有一个网格 API 和对象模型，而不是操作 html...无论如何它都可以工作。

提醒：记得跳过隐藏列，因为它们没有col 标签。那是如果您尝试将其应用于所有列

【参考方案2】：

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

另请注意：我不想使用 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]);

【讨论】：

用于查找 col 的 JQuery 可能不再正确。我只需要做这样的事情，我的结果是这样的： $("#grid .k-grid-header .k-grid-header-wrap").find...

这个功能怎么用？！！ @Echostorm