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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid context menu item inserting

Thread ID:

Created:

Updated:

Platform:

Replies:

143808 Apr 5,2019 12:01 PM UTC Apr 9,2019 10:59 AM UTC Angular - EJ 2 3
loading
Tags: ContextMenu
Domantas
Asked On April 5, 2019 12:01 PM UTC

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 [Syncfusion]
Replied On 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. 

@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'); 
    } 
} 




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
Replied On April 8, 2019 12:20 PM UTC

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:

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 [Syncfusion]
Replied On 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 
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. 
 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon