CODEWITHSUNDEEP
c#asp.net-mvctelerikkendo-grid
GrahamJRoy
GrahamJRoy

Reputation: 1643

Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

I have a Telerik MVC Grid in a Razor view. I have added the ColumnMenu option which gives the user the ability to show/hide columns in the grid. By default it places this in the context menu of the header of the columns. I want to change this so that it is available in the ToolBar header as a custom control.

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

I think it sits better in the toolbar header since it is about all the columns whereas the rest of the items in the context header of a column relate to just that column (filtering, sorting).

The only thing I don't know is what I can put on the custom toolbar in order to make use of the existing ColumnMenu control

Upvotes: 2

Views: 698

Answers (1)

GrahamJRoy
GrahamJRoy

Reputation: 1643

With the help of a work colleague we found an undocumented piece of js that allowed us to do this. Firstly you need to create a custom toolbar:

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

and then add the js 

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

Upvotes: 1

Related Questions