在kendo-ui网格中的show/hide列之后，有什么方法可以自动调整网格列宽吗？

Question

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

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

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

Answer 1

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

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

Answer 2

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

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;
            }
        });
    }
}

并指定在列 show/hide

上调用此函数

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

Answer 3

只需在样式中添加2行：

#grid table {
    min-width: 100%;
}

礼貌： Kendo Documentation