Put kendo-grid-column-menu-chooser inside a popup that shows when button is clicked

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

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.

https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnMenuChooserComponent/

Attached Files:

columns.PNG

3 comments

ADMIN

Yanmario

Posted on: 24 Sep 2021 11:39

Hi,

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:

https://stackblitz.com/edit/angular-48wkep-rzqtqn?file=app%2Fapp.component.ts

https://www.telerik.com/kendo-angular-ui/components/buttons/button/

https://www.telerik.com/kendo-angular-ui/components/popup/

https://www.telerik.com/kendo-angular-ui/components/grid/columns/hidden/

I hope this helps.

Regards,
Yanmario
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>
                <kendo-grid-spacer></kendo-grid-spacer>
                <kendo-grid-column-chooser></kendo-grid-column-chooser>
             </ng-template>

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?

<kendo-grid-column-chooser>

doesn't display without some extra information...

ADMIN

Dimitar

Posted on: 17 Sep 2021 08:29

Hello,

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"
            [height]="410"
            [columnMenu]="{ columnChooser: false }"
            [filterable]="true"
            [sortable]="true"
        >

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.

Regards,
Dimitar
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 https://learn.telerik.com/.