kendo-ui - 剣道グリッドの列 非表示/表示、有効/無効

Question

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

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

前もって感謝します！

Answer 1

KendoUI グリッドで列を表示/非表示にするには、引数として数値 (表示/非表示にする列のインデックス) または文字列 (その列に関連付けられているフィールドの名前) を使用する必要があります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

Answer 2

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

Answer 3

すでに作成されている剣道グリッドについては、次の方法ですべての列を編集可能/編集不可にすることで、表示/非表示を切り替えることができます。

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