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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142420 Feb 2,2019 09:54 AM UTC Feb 11,2019 06:30 AM UTC Vue 3
loading
Tags: ContextMenu
Jzy
Asked On February 2, 2019 09:54 AM UTC

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


Jzy
Replied On 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

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


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