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
