Question

我在Razor视图中有一个Telerik MVC Grid。我添加了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控件

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

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

1 个答案: