Completed
Last Updated: 17 Sep 2021 22:03 by Z
Z
Created on: 10 Sep 2021 20:24
Category: Kendo UI for Angular 2+
Type: Feature Request
0
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:
2 comments
Z
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...
Missing User
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/.