Question

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

应该说明问题的简化代码（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控件，我希望网格刷新，所有三个col都可见。它不是。 fnShowHide()不能胜任这项工作。

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

我仍然有点困惑是否支持动态隐藏/显示cols ，但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 Wrappers隐藏/显示列略有不同。

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

1 个答案: