ContextMenu doesn't have hideItems or removeItems

[Unknown]

Hi,

With the grid component I was able to do a dynamic context menu using functions like this:

onContextMenuOpen(event: ContextMenuOpenEventArgs) {

this.gridObj.contextMenuModule.contextMenu.hideItems(['referenceItem']);

this.gridObj.contextMenuModule.contextMenu.removeItems(this.currentMenuItems.map(v => v.text || ''));

this.currentMenuItems = [];

if (event.column && event.rowInfo?.rowData) {

const field = event.column.field;

const value = event.rowInfo.rowData[field];

this.currentMenuItems = this.utils.getContextMenu(field, value);

this.gridObj.contextMenuModule.contextMenu.insertAfter(this.currentMenuItems, 'referenceItem');

}

}



But with the TreeGrid I can't seem to find the functions hideItems, removeItems, insertAfter.

My goal is to have a different menu for each column that depends on the column field and the value of the row.

Any idea how I can get that to work on the TreeGrid ?

Best Regards,

Théo Armengou

[Manivannan Padmanaban]

Hi Théo Armengou,

Thanks for contacting Syncfusion Forums.

Query 1: I can't seem to find the functions hideItems, removeItems, insertAfter.

We can access the above functions in tree grid using below code example,

 

// HTML Page

<ejs-treegrid #treegrid [dataSource]='data'  …….>

        <e-columns>

…………………………..

 

        </e-columns>

    </ejs-treegrid>

 

// TS Page

 

@ViewChild('treegrid')

public treegrid: TreeGridComponent;

    

 

contextMenuOpen(event: ContextMenuOpenEventArgs) {

        this.treegrid.grid.contextMenuModule.contextMenu.hideItems(['referenceItem']); // using grid instance you can access the above functions

        this.treegrid.grid.contextMenuModule.contextMenu.removeItems(this.currentMenuItems.map(v => v.text || ''));

        this.currentMenuItems = [];

 

        if (event.column && event.rowInfo?.rowData) {

          ..................

            this.treegrid.grid.contextMenuModule.contextMenu.insertAfter(this.currentMenuItems, 'referenceItem');

        }

    }

 

Query 2: Different menu for each column that depends on the column field and the value of the row

Using custom context menu, we can render the different customized context menu items. For your convenience, we have created the sample please refer to the below link.

https://stackblitz.com/edit/angular-cfft39?file=app.component.ts

In the above sample, we have showed the context menu option only for the taskName column (i.e., tree column) and for parent rows alone as like same you can achieve your requirements.

Please get back to us if you need further assistance. We will be happy to assist you.

Regards,

Manivannan Padmanaban