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

Question

我在 Razor 视图中有一个 Telerik MVC 网格。我添加了 ColumnMenu 选项，使用户能够在网格中 show/hide 列。默认情况下，它将其放置在列的 header 的上下文菜单中。我想更改它，以便它在工具栏 header 中作为自定义控件可用。

@(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

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

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

Answer 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
});

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

Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

c#

asp.net-mvc

telerik

kendo-grid