Kendo UI Grid - 在 MVC3 中隐藏/取消隐藏列

Question

我的案例是一个包含大约 20 个属性的搜索窗口，用户可以在其中选择指定搜索条件。每个属性都有一个相应的复选框，用于切换该道具是否包含在搜索结果中。然后搜索结果显示在剑道网格中。

应该说明问题的简化代码（kendo ui complete ver. 2012.2.710）：

<input type="checkbox" onclick="fnShowHide(1);" name="showSearchColumn" id="checkShowField1"  />                                

<div id="example" class="k-content">
    <div id="kendoGridTest"></div>
</div>

<script>
function fnShowHide( iCol )
{
   $('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;
   $('#kendoGridTest').data("kendoGrid").refresh();
}
</script>

MVC3-controller 方法从搜索返回的数据是 JsonResult 类型（在下面给出为jsonResultSearchResult）：

$('#kendoGridTest').kendoGrid({
    dataSource: jsonResultSearchResult,
    schema: {
        model: {
            fields: {
                FirstName: { type: "string" },
                LastName: { type: "string" },
                Address: { type: "string" }
            }
        }
    },
    sortable: true,
    resizable: true,
    columns: [{
        field: "FirstName",
        width: 90,
        title: "First name"
    },
        {
            field: "LastName",
            width: 120,
            hidden: true,
            title: "Last name"
        },
        {
            field: "Address",
            width: 140,
            title: "Adr"
        }
    ]
});

执行搜索后，网格填充了正确的数据，LastName 确实被隐藏了。但是，如果用户现在检查checkShowField1 控件，我希望网格在所有三个列都可见的情况下刷新。它不是。 fnShowHide() 不做这项工作。

我必须承认，在 VS 中进行调试时，我在 QuickWatch 窗口中寻找任何类型的 Columns 集合。 fnShowHide 中的集合包含网格初始化时的正确数据，我可以操作 .hidden 属性，但网格仍然不显示列。

我仍然有点困惑是否支持动态隐藏/显示列，但this accepted answer from a Telerik employee 看起来很有希望。

Answer 1

要使用 JavaScript 在客户端隐藏列，您应该使用 hideColumn() 并使用 showColumn() 显示它。这两种方法都有几个重载——你要么传递列的索引，要么传递列绑定到的字段的名称。 例如：

var grid = $('#GridID').data('kendoGrid');
grid.hideColumn(2);
//or show it
grid.showColumn("OrderDate") // lets say thats the field name of the same column

您链接的帖子显示了如何使用 MVC 包装器隐藏/显示列，这略有不同。