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

Grid context menu item inserting


I have an issue when inserting item in grid context menu. As it seems the only way to insert item to context menu is by text and this is where it gets complicated. I have context menu with deeper levels and the same word appears through those levels and when I'm inserting it by text it adds to the first found of text, but I want it deeper. How can I deal with this to add in correct place.

As you can see in the picture below "Naujas" if specified in two places and context menu item gets inserted at first finding when using .insertAfter();

3 Replies

HJ Hariharan J V Syncfusion Team April 8, 2019 12:03 PM UTC

Hi Domantas, 

Greeting from syncfusion. 

We have validated the provided information and we suggest you to apply id (unique) for the context menu items. In the below sample, we have applied id property for the custom contextMenuItems in Grid and perform actions based on that (you can also differentiate items based on the id ). 

Please check the below sample and code example for more information. 

  template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' (contextMenuClick)='contextMenuClick($event)' [allowPaging]='true' 
  [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [contextMenuItems]="contextMenuItems"> 
. . . . . 
  providers: [ToolbarService, PageService, ExcelExportService, PdfExportService] 
export class AppComponent implements OnInit { 
  ngOnInit(): void { 
      this.contextMenuItems = [{text: 'Copy with headers', target: '.e-content', id: 'copywithheader'}, 
            text: 'Copy without headers', 
            items: [ 
                    text: 'Copy', 
                            text: 'Copy with headers', 
                            id: 'copywithheader1' 
  contextMenuClick(args: any): void { 
    if (args.item.id === 'copywithheader') { 
        alert('Copy with headers'); 
     if (args.item.id === 'copywithheader1') { 

If we misunderstood your query then share more details it will be more helpful for us to provide a better solution as soon as possible. 


DO Domantas April 8, 2019 12:20 PM UTC


You did misunderstood my question. The problem is in "InsertAfter()" and "InsertBefore()" functions when you're inserting item in grid context menu, not when you click it.

I prepared sample for easier understanding:

The main issue is that I can't insert element where I want in any context level if there's more than one item with the same text, cause method inserts only by text, but not by ID

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 9, 2019 10:59 AM UTC

Hi Domantas, 
Thank you for sharing more details. 
We have checked your requirement and we would like to let you know that the insertAfter/insertBefore methods will insert the items based on both id and text. If you want to insert the item based on the unique id, then you need to pass the isUniqueId argument as true in the insertAfter/insertBefore method as like in the below code example. 
Code Example 
// set isUniqueId argument as true, if you want to insert items based on id 
[{ text: 'test', id: 'test' }], 'copywithheader1', true); 
// If you want to insert items based on text 
[{ text: 'test', id: 'test' }], 'Copy') 
For your convenience, we have modified your provided sample based on your requirement. Please find the link below. 
Could you please check the above solution and get back to us with more information if we misunderstood your requirement or you need any further assistance on this? 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon