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

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