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

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

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.



3 Replies

SI Silambarasan I Syncfusion Team February 6, 2019 10:56 AM UTC

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. 
 
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. 
 
 
Could you please check the above information and get back to us if you need any further assistance? 
 
Regards, 
Silambarasan 



JZ Jzy February 11, 2019 01:18 AM UTC

Hi Silambarasan,

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

Thanks, 
Jzy


SI Silambarasan I Syncfusion Team February 11, 2019 06:30 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon