How to show context menu on custom button click on ganttchart tool bar

[Kumar, K Bharath]

Added one custom button in Gantt Chart tool bar. On Task selection when user click on custom button ,it should show custom context menu on ganttchart tool bar.

[Gopinath Munusamy]

Hi Kumar,

Greetings from Syncfusion support.

We have prepared a sample to achieve your requirement. In this sample we have used a custom toolbar item and using toolbarClick event we have rendered the custom menu item in the context menu element. We have attached the sample and code snippets for your reference. Please check the below sample and code snippets for more details,

Code Snippets:

[app.component.html]

<ejs-gantt id="ToolbarTemplate" #ganttToolbar (toolbarClick)="toolbarClick($event)">

    </ejs-gantt>

<ejs-contextmenu id='contextmenu' [items]= 'menuItems'></ejs-contextmenu>

[app.component.ts]

public menuItems: MenuItemModel[] = [{text: 'Cut',},{text: 'Copy',},{text: 'Paste',}];

//…

this.toolbar = ['ExpandAll','CollapseAll',

      {

        text: 'contextMenu',

        tooltipText: 'contextMenu',

        id: 'contextMenu',

      },

    ];

//…

public toolbarClick(args: ClickEventArgs): void {

    if (args.item.text === 'contextMenu') {

      let contextmenuObj: ContextMenu = getInstance(document.getElementById('contextmenu'),ContextMenu) as ContextMenu;

      var clientRect = document.getElementById('contextMenu').getBoundingClientRect();

      contextmenuObj.open(clientRect.bottom, clientRect.left);

    }

  }

Sample: https://stackblitz.com/edit/angular-h22jfz-wxgpjf?file=app.component.ts

Also, we have attached the documentation for how to customize the context menu items. Please check this below UG documentation link for more details,

UG Documentation:  https://ej2.syncfusion.com/angular/documentation/gantt/context-menu/#custom-context-menu-items

Regards,

Gopinath M

[Kumar, K Bharath]

Hi

How to show context menu on click of  CustomaTab tab item in ganttchart toolbar when i select task.

[Monisha Sivanthilingam]

Hi Kumar,

We have produced a sample in which we clicked the Gantt Chart toolbar item to open the context menu. When a toolbar item is clicked in the toolbarClick event, we have invoked the open method accessible in the context menu control to open the context menu. The answer is illustrated by the code samples that follow.

App.component.html

 

<ejs-contextmenuid='contextmenu'[items]= 'menuItems'></ejs-contextmenu>

 

App.component.ts

   

public toolbarClick(args: ClickEventArgs): void {

  if (args.item.text === 'ContextMenu') {

    var menuObj = new ContextMenu(this.menuOptions, '#contextmenu');

     menuObj.open(40, 20);

  }

}

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

Online Documentation: https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started/

Regards,

Monisha.