Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

[Graham]

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

[Dimiter Madjarov]

Hello Graham,

Adding the built in column menu to the Grid toolbar is not supported out of the box. You could implement some custom control for listing the columns and hide/show them via the Grid API showColumn and hideColumn methods.

Regards,
Dimiter Madjarov
Telerik

[Graham]

In case anyone else needs to do the same thing, this is how I solved it.

 

Add 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 use the in built js (undocumented) function:

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

 ​

[Asad]

Thnk you very much. Still after 7 years and this solution is working :)

[Abraham]

Two years later, not finding a better solution. Thanks for sharing @Graham