We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.


3 Replies

GM Gopinath Munusamy Syncfusion Team October 20, 2022 07:43 AM

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



KK Kumar, K Bharath replied to Gopinath Munusamy November 3, 2022 07:38 AM

Hi

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




MS Monisha Sivanthilingam Syncfusion Team November 7, 2022 07:19 AM

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(4020);

  }

}


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.


Loader.
Live Chat Icon For mobile
Up arrow icon