web-dev-qa-db-ja.com

剣道UIグリッドの列幅をプログラムで設定する方法

剣道UIグリッドの列幅をプログラムで設定したいのですが。私は次のコードを使用しています：

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

ステートメントの実行後にchrome）でデバッグすると、grid.columns [i] .widthが新しい値に適切に設定されているように見えますが、GUIで何も変更されず、列幅は同じままです。何が足りないのですか？

javascriptkendo-uikendo-grid
10
g.pickardou

これで終わりました。 Dionのソリューションは、colgroupsの使用についての最初のアイデアを与えてくれましたが、そのソリューションは、different colgroupsにある列がロックされていないことに限定されています。

また、注意：grid.setOptionsの制限により、添付されたイベントとヘッダーが台無しになるため、使用したくありません（ASP MVCヘルパーを使用してグリッドをレンダリングする場合）

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
g.pickardou

グリッドの定義ではなく、要素を介してグリッドの幅を変更する必要があります。剣道グリッドにはヘッダーとコンテンツが含まれているため、2つの要素を変更する必要があります。

代わりにこのコードを使用してください

$("#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);

サンプル

9
Dion Dirza