选择在Telerik网格中显示哪一列？

Question

我有一个MVC telerik网格，其中显示多个列。 我想做的是为用户提供混合和匹配他们看到的列的选项，例如，如果网格可以显示10列，则界面可以为用户提供3列以查看数据，因此他们必须选择这三个网格将分别显示什么。

我认为它与.Columns命令有关，因此是否可以使用户通过GUI对其进行修改？

Answer 1

在允许用户查看网格应该表示的数据的特定视图时，有两种选择。 尽管为每个用户使用不同的Grid声明是一种方法，但最简单的方法可能只是显示或隐藏同一Grid的列。

可以通过利用Grid组件随附的内置列选择器立即进行操作，如本演示中所示 。 右键单击任何标题可为用户提供一个简单的界面，以选择要显示的列。

或者，您可以使用hideColumn / showColumn客户端API调用，该调用可以将列绑定到的字段名或将索引作为参数。 一个简单的示例（尽管它只隐藏您定义的列）：

<input type="text" id="columnHider"/>
<br />
<button type="button" id="columnButton">Click</button>

@model IEnumerable<Customer>

@(Html.Telerik().Grid(Model)
        .Name("TelerikGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Address);
            columns.Bound(c => c.City);
        })
        .Pageable(pageSettings => pageSettings.Enabled(true).PageSize(10))
        .ColumnContextMenu()
)

<script type="text/javascript">
    $(document).ready(function () {
        $("#columnButton").click(function () {
            var grid = $("#TelerikGrid").data("tGrid");
            var columnString = $("#columnHider").val();
            grid.hideColumn(columnString);
        });
    });
</script>

这使您可以定义自己的界面来隐藏/显示列。