时间戳

首页 > 解决方案 > 有没有办法在 kendo-ui 网格中显示/隐藏列后自动调整网格列宽？

css - 有没有办法在 kendo-ui 网格中显示/隐藏列后自动调整网格列宽？

问题描述

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

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

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

标签： csskendo-uikendo-gridkendo-asp.net-mvc

解决方案

我找到了一种解决方法来解决我的问题。我编写了一个自定义函数来调整每列的宽度ColumnHide和ColumnShowkendo-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;
            }
        });
    }
}

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

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

推荐阅读