OnCreateMenu - how to keep existing menu items when i try to add new item.

[Josnaaa]

If i try to customize the left node , the existing items like type, append .. are not visible. only the newly added item is visible.

But i want insert and delete as well , how can i achieve that , please help.

And also the click events for each item are geeting called when the user clicks on node, like say i have 3 items and all the 3 gets called on click of node, how can i overcome this.

[josdejong]

Have you seen /examples/21_customize_context_menu.html? That appends one new item to the context menu.

[Josnaaa]

yeah, i saw , the same example i followed, i am using Angular 12 and want to know how can i implement it there.

And also the click is triggering when i click on node, instead it has to trigger when user clicks on menu item.

[josdejong]

want to know how can i implement it there.

The onCreateMenu function uses just pure JavaScript, no Angular specific things. So you can just do the same as in the example.

And also the click is triggering when i click on node, instead it has to trigger when user clicks on menu item.

I'm not sure what you mean. Is there an issue in the example, or in your implementation in Angular?

[Josnaaa]

1. when i use onCreateMenu the exiting menu items are not available for example the insert, remove, Type, Append...

how can i add new item to the existing items????

2. click is triggering when i click on node, instead it has to trigger when user clicks on menu item.

[josdejong]

1. See the example we are discussing. The gist of it is:

   // ...
   onCreateMenu: function (items, node) {
     // add an item to the existing items
     items.push({
       // ...
     })
   
     return items
   }

2. Sorry I don't understand you

[Josnaaa]

1. Here onCreateMenu: function (items, node), what's the value assigned to items??
2. the click has to trigger when user clicks on insert or delete or export, but all the 3 click functions are triggering when user clicks on node.
   items = [
   { text: 'Insert', click: console.log('insert') },
   { text: 'Delete', click: console.log('delete') },
   { text: 'Export', click: console.log('export) },
   ];

[josdejong]

I think you have enough pointers (and a fully working example, and there is also API docs) to solve this puzzle. One last hint: the click property of the menu items should be a function. I think you will learn more from putting the pieces together yourself than from me building your solution for you. It may also help to get a better basic understand of JavaScript first?

[MichaelPanwenjie]

I find the same issue and there is no response.
MaaxGr/ang-jsoneditor#12

[josdejong]

It looks like the type definitions of the angular library are not on par with the actual functionality. Of course, you can always resort to // @ts-ignore as a last resort to get stuff working.