This is a migrated thread and some comments may be shown as answers.

Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

2 Answers 317 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Graham asked on 19 Oct 2015, 10:26 AM

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.

               .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()


                .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

2 Answers, 1 is accepted

Sort by
Dimiter Madjarov
Telerik team
answered on 20 Oct 2015, 02:41 PM

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.

Dimiter Madjarov
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Top achievements
Rank 1
answered on 09 Nov 2015, 10:28 AM

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


Add a custom toolbar

.ToolBar(toolbar =>
                                                   <div class="toolbar" id="showColumnToolbar">
                                                       <label >Show Colums&nbsp;</label>
                                                       <span id="showColumn"></span>


and then use the in built js (undocumented) function:

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


Asked by
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Top achievements
Rank 1
Share this question