剑道网格列隐藏/显示，启用/禁用答案

【问题标题】：Kendo Grid columns Hide/Show, Enable/Disable剑道网格列隐藏/显示，启用/禁用
【发布时间】：2013-11-24 16:49:03
【问题描述】：

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

感谢任何帮助。

提前谢谢你！

【问题讨论】：

【解决方案1】：

对于已经创建的剑道网格，您可以通过以下方式显示/隐藏使所有列可编辑/不可编辑：

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢很多隐藏/显示，即使网格是可编辑的，它也很有魅力。类似地，任何可用于自定义逻辑公关事件的启用/禁用列的东西。再次感谢
不确定是否理解您评论的最后一部分“任何可用于启用/禁用自定义逻辑公关事件的列”...基本上，从事件或何时使用showColumn/hideColumn条件满足。
您好，我们如何为 raw 做同样的事情。
@padhiyar，您是否尝试过使用过滤条件？
@OnaBai 是的，这也是解决方案，但我想根据客户端的下拉列表选择隐藏和显示原始数据是否可以在客户端？我已经看到了这个example，但它是静态的

【解决方案3】：

Kendo 网格包含一个showColumn 方法，该方法将采用索引或列名字符串。要启用隐藏/显示列，您需要将网格 columnX 初始化为普通列，并将其标记为隐藏（在 MVC 中，这是绑定列时的 .Hidden() 方法）。然后基于一个页面事件，你可以简单的调用showColumn（然后hideColumn进行反向操作）。

【讨论】：