在 kendo-ui 网格中显示/隐藏列后，有啥方法可以自动调整网格列宽？

Posted 2023-05-07

【中文标题】在 kendo-ui 网格中显示/隐藏列后，有啥方法可以自动调整网格列宽？

【英文标题】：Is there any way to automatically adjust grid column width after show/hide a column in kendo-ui grid?在 kendo-ui 网格中显示/隐藏列后，有什么方法可以自动调整网格列宽？

【发布时间】：2019-12-12 23:57:53

【问题描述】：

我正在使用 kendo-UI 网格来显示我的数据库中的一些数据。我有一组预定义的列，其中一些默认是可见/隐藏的。

每列都根据内容和 UI 要求设置为特定宽度，并且不能设置为自动。

用户可以选择根据自己的喜好显示或隐藏列。问题是如果用户隐藏一列，它会在那里留下一个空白空间。有什么办法可以填补空白（比如将隐藏列的宽度均匀分布到所有其他可见列）

【问题讨论】：

隐藏列网格子项还需要从模板中删除列网格或至少将其宽度设置为 0。您正在使用的问题和方法的任何实际示例？

仅使用 kendoColumnMenu 工具栏选项来隐藏/显示列

【参考方案1】：

我找到了一种解决方法来解决我的问题。我编写了一个自定义函数来调整 kendo-grid 的 ColumnHide 和 ColumnShow 事件中每列的宽度。

function AdjustColumnWidth() 
    var grid = $("#MyGrid").data("kendoGrid");
    var columns = $("#MyGrid").data("kendoGrid").columns;
    var totalWidth = $('#MyGrid').width();// current width of the grid;
    var visibleColumnsWidth = 0;
    var visibleColumnsCount = 0;

    var visibleColumnsWidthAll = [70];//width for first column-this column will be shown always.
    $.each(columns, function (index) 
        if (!this.hidden) 
            if (grid.table[0].rows.length)
            
                if (typeof grid.table[0].rows[0].cells[index]!="undefined")
                
                    visibleColumnsWidth += grid.table[0].rows[0].cells[index].offsetWidth;
                    visibleColumnsCount += 1;
                    if (index > 0) 
                        visibleColumnsWidthAll.push(grid.table[0].rows[0].cells[index].offsetWidth);
                    
                
            
        
    );
    if (visibleColumnsWidth < totalWidth) 
        var diff = totalWidth - visibleColumnsWidth;
        var toAdd = diff / (visibleColumnsCount - 1);
        var tableCol = 1;
        $.each(columns, function (i) 
            if (!this.hidden && i != 0) 
                $("#MyGrid .k-grid-header-wrap").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                $("#MyGrid .k-grid-content").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                tableCol += 1;
            
        );
    

并在显示/隐藏列上分配调用此函数

.Events(ev => ev.ColumnHide("AdjustColumnWidth").ColumnShow("AdjustColumnWidth"))

【参考方案2】：

您可以在网格定义中使用它：

columnShow: function(e) 
    var newOptions = $.extend(, grid.getOptions());
    newOptions.columns[0].width = "150px";
  

检查这个例子：http://dojo.telerik.com/ikAbU 以及此处的 columnShow 事件文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnshow

【参考方案3】：

只需在样式中添加 2 行：

#grid table 
    min-width: 100%;

礼貌： Kendo Documentation