Kendo UI网格-隐藏/取消隐藏MVC3中的列

Question

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

应该说明问题的简化代码（kendo ui完整版本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控制器方法从搜索中返回的数据类型为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属性，但网格仍然不显示该列。

我仍然有点困惑是否支持cols的动态隐藏/显示，但Telerik员工的这一公认答案看起来很有希望。

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包装器隐藏/显示列，这略有不同。