将 ColumnMenu 添加到 Telerik MVC 网格上的自定义工具栏答案

【问题标题】：Add ColumnMenu To Custom Toolbar On Telerik MVC Grid将 ColumnMenu 添加到 Telerik MVC 网格上的自定义工具栏
【发布时间】：2015-10-19 08:54:20
【问题描述】：

我在 Razor 视图中有一个 Telerik MVC 网格。我添加了 ColumnMenu 选项，使用户能够在网格中显示/隐藏列。默认情况下，它将它放在列标题的上下文菜单中。我想更改它，使其在 ToolBar 标题中作为自定义控件可用。

@(Html.Kendo().Grid<StockReport>()
  .Name("grid")
  .Columns(columns =>
    {
      columns.Bound(p => p.SohQty).Title("Quantity");
      columns.Bound(p => p.StockName).Title("Item Name");
      ...
  .ToolBar(tools => tools.Excel())
  .ToolBar(tools => tools.Custom()
    .Text("Customise")
    .WhatToPutHere???
    )
  ...
  .ColumnMenu()  //I want to reuse this but in the custom toolbar

我认为它在工具栏标题中更好，因为它与所有列有关，而列的上下文标题中的其余项目仅与该列相关（过滤、排序）。

我唯一不知道的是我可以在自定义工具栏上放什么以利用现有的 ColumnMenu 控件

【问题讨论】：

标签： c# asp.net-mvc telerik kendo-grid

【解决方案1】：

在一位同事的帮助下，我们发现了一个未记录的 js 片段，它允许我们这样做。首先你需要创建一个自定义工具栏：

.ToolBar(toolbar =>
 {
   toolbar.Template(@<text>
                       <div class="toolbar" id="showColumnToolbar">
                           <label >Show Colums&nbsp;</label>
                           <span id="showColumn"></span>
                       </div>
                    </text>);
})

然后添加js

var grid = $("#grid").data("kendoGrid");
$("#showColumn").kendoColumnMenu({
  filterable: false,
  sortable: false,
  dataSource: grid.dataSource,
  columns: grid.columns,
  owner: grid
});

【讨论】：