web-dev-qa-db-ja.com

Kendo Gridの列の非表示/表示、有効化/無効化

条件またはイベントで剣道グリッドの列を非表示/表示および有効/無効にする方法。 .modelでkendogrid列を有効/無効にするオプションしか見つかりませんでした

どんな助けも大歓迎です。

前もって感謝します！

kendo-uikendo-grid
21
Apurv Deshmukh

KendoUI Gridで列を表示/非表示するには、 showColumn および hideColumn を使用し、引数として数値（列のインデックス）を使用する必要があります表示/非表示にする）または文字列（その列に関連付けられているフィールドの名前）。

例：

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 }
    ]
}).data("kendoGrid");

$("#show_col1").on("click", function() {
    // Use the index of the column to show
    grid.showColumn(0);
});

$("#hide_col1").on("click", function() {
    // Use the name of the field to hide it
    grid.hideColumn("FirstName");
});

列の初期化で hidden を設定することで、列を最初に非表示にするかどうかを制御できます。

こちらの例をご覧ください： http://jsfiddle.net/OnaBai/XNcmt

33
OnaBai

Kendoグリッドには、インデックスまたは列名文字列のいずれかを取る showColumn メソッドが含まれています。列の非表示/表示を有効にするには、グリッドcolumnXを通常の列として初期化し、非表示としてマークします（MVCでは、列をバインドする際の.Hidden（）メソッドです）。次に、ページイベントに基づいて、単にshowColumnを呼び出すことができます（その後、hideColumnで操作を元に戻します）。

1
Rick Mortensen

作成済みのKendo Gridの場合、次の方法ですべての列を表示/非表示にして編集/編集できます。

var allowEdit = false;
var grid = $("#sampleGrid").data("kendoGrid");
grid.showColumn(0);
grid.showColumn(1);

if (!allowEdit) {
    grid.hideColumn(0);
    grid.hideColumn(1);
}
var len = $("#sampleGrid").find("tbody tr").length;
for (var i = 0; i <= len ; i++) {
    var model = $("#sampleGrid").data("kendoGrid").dataSource.at(i);
    if (model) {
        for (i = 0; i <= (grid.columns.length - 1) ; i++) {
            var column = grid.columns[i];
            model.fields[column.field].editable = allowEdit;
        }
    }
}
0
carlo818