Column menu items list customization

[Alexander]

Currently, I'm investigating SyncFusion grid for Angular 5 and found great feature - to turn on column menu to have all controls (sort, group, filter) in one place.

But it's not enough for my needs and I'm looking for the ways to customize the list of items in column menu, e.g. I want to be able to add my items with custom actions to react on click/select user actions.

For example, I want to add an item to hide current column directly or to pin this column.

Could you please tell me if it's possible and how to implement it if it is? Or I should create a custom component for this manipulations?

Thanks in advance.

[Thavasianand Sankaranarayanan]

Hi Alexander, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to show/hide the columns in ejGrid control. So, we suggest you to use column chooser feature to show/hide the columns in ejGrid control. 

We have already discuss about the above mention query in the following documentation link. 

Doc Link: https://help.syncfusion.com/angular/grid/columns#column-chooser 

Doc Link: https://help.syncfusion.com/api/angular/ejgrid#methods:hidecolumns 

Doc Link: https://help.syncfusion.com/api/angular/ejgrid#methods:showcolumns 

Regards, 

Thavasianand S. 

[Alexander]

Hello,

Thank you for your answer but it's not the thing I want to do.

Recently I found that I can customize a list of the items in the column menu via [columnMenuItems] parameter. But still, I'm looking for the way to subscribe to click actions on my custom items from this list.

P.S.

Maybe this information will be important:

I found in the API for Grid (columnMenuClick) event emitter, but it doesn't work for me, Also, I tried (columnMenuOpen) and it works as described in API.

P.P.S.

I found an example in your documentation for TypeScript

http://ej2.syncfusion.com/15.4.23/documentation/grid/columns.html?lang=typescript#custom-column-menu-item

but it doesn't work.

So, I want to be able to do similar stuff with my column menu but using Angular 5. I didn't find such example in your official documentation.

Regards,

Alexander Ketov

[Ramdhas Ueikattan]

Hi Alexander, 

Thanks for your update. 

We have checked your query and you can achieve your requirement(“Is it possible to configure custom column menu items with custom actions?”) by using “columnMenuItems” as collection of “columnMenuItemModel”. Actions for this customized items can be defined in the “columnMenuClick” event. Please refer to the following code example, documentation link and sample link. 

[component.html] 

<ej-grid #grid [dataSource]='data' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' [columnMenuItems]='menu' columnMenuClick='columnMenuClick($event)' [groupSettings]='groupOptions' allowFiltering='true' [filterSettings]='filterSettings'> 

        <e-columns> 

            .    .   . 

            .    .   . 

        </e-columns> 

    </ej-grid> 

[component.ts] 

 

@Component({ 

    selector: 'control-content', 

    templateUrl: 'columnmenu.html', 

}) 

export class ColumnMenuComponent implements OnInit { 

    public data: Object[]; 

    public menu: columnMenuItemModel, 

    @ViewChild('grid') 

    public grid: GridComponent; 

    ngOnInit(): void { 

        this.data = data.slice(0, 60); 

        this.menu = [{text:'Clear Sorting', id:'gridclearsorting'}];     // custom column menu items 

        .    .    . 

    } 

    columnMenuClick(e){ 

        if(args.item.id === 'gridclearsorting'){ 

            grid.clearSorting();                                          // custom column menu action                

        } 

    } 

} 

 

Documentation : 1.https://ej2.syncfusion.com/15.4.23/angular/documentation/grid/api-gridComponent.html#contextmenuitems  

                               2. https://ej2.syncfusion.com/15.4.23/angular/documentation/grid/api-gridComponent.html#columnmenuclick  

Plunker sample: https://plnkr.co/edit/XZQxv8JCUzcv2NEYg3MI?p=preview  

Note: Please update the Essential JS2 Grid v15.4.24. In that release the custom column menu click event triggering issue fix was included. 

Regards, 

Ramdhas  Ueikattan 

[Alexander]

Hello Ramdhas  Ueikattan,

That's what I need. Thank you.

Regards,

Alexander Ketov

[Pavithra Subramaniyam]

Hi Alexander, 

Thanks for your update. 

We are glad to hear that your problem has been resolved. 

Please contact us if you have any queries. 

Regards, 

Pavithra S.  

[Peter Gelderbloem]

How do you use this to ADD to the menu and not completely obliterate defaults.

I want teh current menu items to work and add extra custom ones. the example above and here https://ej2.syncfusion.com/15.4.23/documentation/grid/columns.html?lang=typescript#custom-column-menu-item

obliterates the existing default menu items

[Seeni Sakthi Kumar Seeni Raj]

Hi Alexander,  

Refer to the following Help Document and the table with the Default Column Menu items.  

https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-menu 

Add these default items along with the custom menu items as shown in the code example.  

    var grid = new ej.grids.Grid({ 

        dataSource: window.orderDatas, 

          . . . 

               . . . 

        showColumnMenu: true, 

         

    columnMenuItems:['SortAscending','SortDescending','Group', 'Ungroup', {text:'Clear Sorting', id:'gridclearsorting'}], 

    columnMenuClick: function(args){ 

        if(args.item.id === 'gridclearsorting'){ 

            grid.clearSorting(); 

        } 

    }, 

              .. . . 

                     . ..  

    }); 

    grid.appendTo('#Grid'); 

 

Refer to the sample. 

https://stackblitz.com/edit/wob5ak?file=index.js 

Regards,  

Seeni Sakthi Kumar S.