Question

我正在使用包含大量列的Kendo Grid，但默认情况下其中一些是隐藏的。这似乎是一个Kendo网格错误，但是当我尝试调整列的大小时，它会立即使自己变宽两倍。所有列的宽度都设置为百分比。

Answer 1

问题在于Grid的逻辑计算列的宽度。如果width是百分比而某些是隐藏的，则宽度将转换为像素错误。解决方案是调整每列的宽度（在开始和列显示\ hide事件），转换为px并分配给html元素。

在show \ hide events：

之后调用Grid的dataBound事件

function adjustGridVisibleColumnsPercentageWidth () {
    var $theGrid = $(“theGrid”);

    var proportions = [];

    var sumOfVisiblePercentage = _($theGrid.getKendoGrid().columns).filter(function (el) {
        return ((el.hidden === undefined || el.hidden === false)
            && _(el.width).isString() && el.width.indexOf("%") >= 0);
    }).reduce(function (memo, el) {
        var onlyNumber = el.width.substring(0, el.width.length - 1);
        var asNumber = parseInt(onlyNumber, 10);
        if (_(asNumber).isNumber()) {
            proportions.push(asNumber);
            return memo + asNumber;
        }
        return memo;
    }, 0);

    var gridWidth = $theGrid.find(".k-grid-header").width();

    var applyProportions = function (ix, el) {
        var cw = Math.round(gridWidth * (proportions[ix] / sumOfVisiblePercentage));
        el.style.width = cw + "px";
    };

    $theGrid.find(".k-grid-header-wrap table[role='grid'] colgroup col").each(applyProportions);
    $theGrid.find(".k-grid-content table[role='grid'] colgroup col").each(applyProportions);
}

此代码根据声明的宽度百分比计算可见列的比例。然后调整html结构。

Kendo Grid列调整大小事件使列更宽

1 个答案: