Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

3 posts, 0 answers
  1. Graham
    Graham avatar
    5 posts
    Member since:
    Jul 2010

    Posted 19 Oct 2015 Link to this post

    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. Dimiter Madjarov
    Dimiter Madjarov avatar
    2288 posts

    Posted 20 Oct 2015 Link to this post

    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
  3. Graham
    Graham avatar
    5 posts
    Member since:
    Jul 2010

    Posted 09 Nov 2015 Link to this post

    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


Back to Top