Как программно установить ширину столбцов сетки Kendo UI

Я хотел бы установить ширину столбцов сетки Kendo UI программно. Я использую следующий код:

function setColumnWidths(grid, options) {
    for (var i = 0; i < options.columns.length; i++) {
        grid.columns[i].width = options.columns[i].width;
    }
}

при отладке в chrome после выполнения операторов grid.столбцы[я].ширина, кажется, правильно установлена на новое значение, однако ничего не меняется в GUI, ширины столбцов остаются прежними. Что я упускаю?

8
javascript kendo-grid kendo-ui

2 ответов

вам нужно изменить ширину сетки через ее элемент вместо ее определения. Сетка Kendo содержит заголовок и содержимое, поэтому вам нужно изменить два элемента.

используйте этот код вместо

$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy);
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy);

пример

8

Я закончил с этим. Решение Диона дало мне начальную идею об использовании colgroups, однако это решение ограничено отсутствием заблокированных столбцов, что находится в разные colgroups.

обратите внимание: я не хочу использовать сетку.setOptions, потому что его ограничения, разрушая вложенные события и заголовок (в случае использования ASP MVC helper для рендеринга сетки)

function setColumnWidths(grid, options) {
    var lockedCount = 0;
    for (var i = 0; i < options.columns.length; i++) {
        if (options.columns[i].hasOwnProperty('locked')) {
            if (options.columns[i].locked) {
                lockedCount++;
            }
        }
    }

    for (var i = 0; i < options.columns.length; i++) {
        var width = options.columns[i].width;
        grid.columns[i].width = width;
        if (options.columns[i].hasOwnProperty('locked') && options.columns[i].locked) {
            $("#grid .k-grid-header-locked").find("colgroup col").eq(i).width(width);
            $("#grid .k-grid-content-locked").find("colgroup col").eq(i).width(width);

        } else {
            $("#grid .k-grid-header-wrap").find("colgroup col").eq(i-lockedCount).width(width);
            $("#grid .k-grid-content").find("colgroup col").eq(i - lockedCount).width(width);
        }
    }
    // Hack to refresh grid visual state
    grid.reorderColumn(1, grid.columns[0]);
    grid.reorderColumn(1, grid.columns[0]);
}
4