Last Updated: 24 Sep 2021 11:39 by ADMIN
Created on: 10 Sep 2021 20:24
Category: Kendo UI for Angular
Type: Feature Request
Put kendo-grid-column-menu-chooser inside a popup that shows when button is clicked
In the angular kendo-grid I have, each column has an ellipses menu that shows sort options and a menu for choosing the columns that are displayed. Some columns are shown, some are hidden, and these can be toggled with a checkbox. How can I put this checkbox menu chooser inside it's own pop up on the same page as the grid? The goal is for a button to show the pop up menu (underneath the button) that shows only this checkbox list of columns. The user can click the button and choose the columns, and update the grid. The ellipses menu functionality would be the same.
Attached Files:
Posted on: 24 Sep 2021 11:39


Correct me if I'm wrong but the desired functionality is to have a separate button with a popup that isn't inside that Grid with the functionality to hide the columns. If that is the case, this functionality can be achieved by using a button with our Popup component as demonstrated in the following demo:

I hope this helps.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Posted on: 17 Sep 2021 22:03
Thank you for the answer. To get a column menu button in the toolbar, the main code change is this: 
<ng-template kendoGridToolbarTemplate>
Between the <kendo-grid></kendo-grid> tags.

But what if I need to put the checkbox list of columns inside its own popup or page element, that happens to be on the same page as the grid?


doesn't display without some extra information...
Posted on: 17 Sep 2021 08:29


You can use the aforementioned ColumMenuChooserComponent outside the column menu template - e.g. in the toolbar. Here's an example. It has the same functionality as the chooser in the column menu. You can additionally include or exclude the chooser from the column menu, if you have a preference. To remove it from there, just set the columnChooser property to false.

        <kendo-grid [kendoGridBinding]="gridData"
            [columnMenu]="{ columnChooser: false }"

That said, you can use the column chooser as a stand-alone component as well without using the column menu at all. It would still work to include the column chooser component in the toolbar without enabling columnMenu.

Let me know if I could be of further assistance.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at