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

问题描述

我正在使用具有很多列的Kendo网格，但是其中一些默认情况下是隐藏的.似乎是Kendo网格的错误，但是当我尝试调整列的大小时，它会立即使其宽度增加一倍.所有列的宽度均设置为百分比.

I’m using a Kendo Grid with a lot of columns, but some of them are hidden by default.It seems like a Kendo grid bug, but when I try to resize a column it instantly makes itself twice as wider.All columns have a width set as percentage.

推荐答案

问题出在计算表格宽度的网格逻辑上.如果宽度是一个百分比，并且有些是隐藏的，则宽度会错误地转换为像素.解决方案是调整每列的宽度(在开始和列show \ hide事件上)，转换为px并分配给html元素.

The problem is with Grid’s logic that computes column’s width. If width is a percentage and some are hidden, width is converted to pixels wrong.The solution is to adjust width for each column (on start and column show\hide event), convert to px and assign to html elements.

在show \ hide事件之后调用Grid的dataBound事件:

Invoke on Grid's dataBound event after show\hide events:

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结构.

This code computes proportions for visible columns basing on declared width percentage. Then html structure is adjusted.

这篇关于Kendo Grid列调整大小事件使列变宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！