在 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 工具栏选项来隐藏/显示列

标签： css kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案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

【讨论】：