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