选择要在telerik网格中显示哪些列?

时间:2012-01-04 09:59:23

标签: c# asp.net asp.net-mvc-3 telerik telerik-grid

我有一个显示多列的MVC telerik网格。我想做的是让用户可以选择混合和匹配他们看到的列,例如,如果网格可以显示10列,则界面可以为用户提供3列来查看数据,他们必须选择3个网格中的每个网格都会显示出来。

我认为它与.Columns命令有关,那么用户可以通过GUI对其进行修改吗?

1 个答案:

答案 0 :(得分:3)

在允许用户查看Grid应该表示的数据的特定视图时,您有几个选项。虽然为每个用​​户提供不同的网格声明是一种方法,但最简单的方法可能是显示或隐藏同一网格的列。

这可以通过利用Grid组件附带的内置列选择器开箱即用,如this demo中所示。右键单击任何标题可为用户提供一个简单的界面来选择要显示的列。

或者,您可以使用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>

这允许您定义自己的界面来隐藏/显示列。