剑道网格列调整大小事件使列变宽

Question

我使用的是带有很多列的剑道网格，但其中一些是默认隐藏的。这看起来像一个剑道网格bug，但当我尝试调整一个列的大小时，它会立即使自己的宽度增加一倍。所有列的宽度设置为百分比

Answer 1

问题在于计算列宽度的Grid逻辑。如果宽度是百分比并且有些是隐藏的，则宽度转换为像素错误。解决方案是调整每个列的宽度(在start和column showhide事件上)，转换为px并分配给html元素。

在showhide事件之后调用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结构