Grid context menu item inserting

[Domantas]

Hello,

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

[Hariharan J V]

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. 

@Component({ 

  template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' (contextMenuClick)='contextMenuClick($event)' [allowPaging]='true' 

  [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [contextMenuItems]="contextMenuItems"> 

. . . . . 

</ejs-grid>`, 

  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', 

                    items:[ 

                        { 

                            text: 'Copy with headers', 

                            id: 'copywithheader1' 

                        }, 

                    ] 

                } 

            ] 

        }]; 

  } 

 

  contextMenuClick(args: any): void { 

    if (args.item.id === 'copywithheader') { 

        this.grid.copy(true); 

        alert('Copy with headers'); 

    } 

     if (args.item.id === 'copywithheader1') { 

        alert('Deeper'); 

    } 

} 

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/context-menu/?no-cache=1#custom-context-menu-items 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-sample263246651  

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. 

Regards, 

Hariharan 

[Domantas]

Hello,

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:

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

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

[Vinoth Kumar Sundara Moorthy]

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 

this.grid.contextMenuModule.contextMenu.insertAfter( 

[{ text: 'test', id: 'test' }], 'copywithheader1', true); 

// If you want to insert items based on text 

this.grid.contextMenuModule.contextMenu.insertAfter( 

[{ text: 'test', id: 'test' }], 'Copy') 

 

For your convenience, we have modified your provided sample based on your requirement. Please find the link below. 

 

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

 

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? 

 

Regards, 

Vinoth Kumar S