Kendo Grid column resize event makes column wider

Question

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.

Answer 1

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.

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

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