ContextMenu Tree couldn't be located after come back from another page

[Jzy]

Hi,

I am using contextmenu combined with treeview.  

At first the ContextMenu Tree is created normally as I right-click one node of Tree View, after I go to another page and come back, ContextMenu Tree is re-rendered, however, it is not working anymore and it throws one error: 

     Uncaught TypeError: Cannot read property 'enableItems' of undefined

         at VueComponent.beforeopen (SuiteTree.vue?0fa7:253)

         at Observer.notify (observer.js?6607:89)

         at ContextMenu.Base.trigger (base.js?54ff:149)

         at ContextMenu.MenuBase.triggerBeforeOpen (menu-base.js?22d3:683)

         at ContextMenu.MenuBase.openMenu (menu-base.js?22d3:645)

         at ContextMenu.MenuBase.cmenuHandler (menu-base.js?22d3:470)

I use it according to the example given by https://ej2.syncfusion.com/vue/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu

          <ejs-contextmenu id='contentmenutree' target='#treeview' :items='menuItems'  :beforeOpen='beforeopen' :select='menuclick'></ejs-contextmenu>

I define three operations: rename, add and delete in menuItems.

The error is threw in the beforeopen function:

          var contentmenutree = document.getElementById('contentmenutree').ej2_instances[0];

document.getElementById('contentmenutree') returns the component accordingly, but document.getElementById('contentmenutree').ej2_instances returns empty.

[Silambarasan I]

Hi Jzy, 

 

Thank you for contacting Syncfusion support. 

 

Based on your provided information, we have checked your reported issue by rendering the Treeview with context menu using router-link and we can reproduce it in our end. For your reference, we have prepared an issue reproducible sample. 

https://codesandbox.io/s/woor90zpqw 

 

And, we found that the cause of this issue is due to the context menu is not properly destroyed while on navigation. We confirmed this as a defect and the fix for this issue will be available in Essential Studio 2019 Volume 1 release which is expected to be rolled-out in the month of March, 2019. 

 

Meanwhile, we would suggest you the below workaround solution to avoid this issue. To get the contextMenu instance, use ref instead of id as like in the below code example. 

 

<ejs-treeview id="treeview" fields="fields"> 

  <ejs-contextmenu  

    ref="contextMenu" // To get the instance 

    cssclass="contentmenutree" // changed the id to cssClass to add styling 

    target="#treeview" 

    v-on:click="onSampleSelect" 

    items="menuItems" 

    beforeopen="beforeopen" 

    select="menuclick"> 

  </ejs-contextmenu> 

</ejs-treeview> 

 

beforeopen: function(args) { 

            

    var contentmenutree = this.$refs.contextMenu; 

    ..// 

} 

 

.contentmenutree ul { 

   padding: 0px; 

   font-size: inherit; 

} 

 

Please find the below sample for your reference. 

https://codesandbox.io/s/p3wpj3vw4j 

 

 

Could you please check the above information and get back to us if you need any further assistance? 

 

Regards, 

Silambarasan 

[Jzy]

Hi Silambarasan,

I tried the solution you gave, it does work. Thank you for your help.

Thanks, 

Jzy

[Silambarasan I]

Hi Jzy, 

 

Thanks for your update. We are happy to hear that your issue has been resolved. As promised, the fix for the issue with “context menu is not properly destroyed while on navigation” will be included in our Essential Studio 2019 Volume 1 release. 

 

Kindly get back to us if you need any further assistance. 

 

Regards, 

Silambarasan