Question

如何在条件或事件中隐藏/显示和启用/禁用剑道网格中的列。我只能在.model

中找到启用/禁用kendogrid列的选项

感谢任何帮助。

提前谢谢！

Answer 1

您在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

Answer 2

Kendo网格包含showColumn方法，该方法将采用索引或列名字符串。要启用隐藏/显示列，您需要将网格columnX初始化为普通列，并将其标记为隐藏（在MVC中，这是绑定列时的.Hidden（）方法）。然后根据页面事件，您只需调用showColumn（然后使用hideColumn来反转操作）。

Answer 3

对于已创建的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;
        }
    }
}

Kendo Grid列隐藏/显示，启用/禁用

3 个答案: