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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Treeview context menu. Show menu only on nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

128987 Feb 20,2017 11:50 AM UTC Feb 22,2017 06:04 AM UTC Angular 3
loading
Tags: ejTreeView
Agne
Asked On February 20, 2017 11:50 AM UTC

Hello,

on my treeview I am trying to use Context menu. I want that context menu will show only when I click on node. Now it shows when I click on any place in container.

If it is relevant, I am getting tree from backend (loadOnDemand: true).

This is my html:
    <div id="mainMenu">
        <div id="mainMenuDiv">
            <ej-treeview #gpTreeViewMenuControl id="mainMenuView" cssClass="customize" (nodeSelect)="onNodeSelected($event)" width="100%" [height]="mainMenuViewHeight" [fields]="mainMenuViewFields" expandOn='click' (nodeExpand)="onNodeExpand($event)" (nodeCollapse)="onNodeCollapse($event)"></ej-treeview>
        </div>
        <!-- Context Menu (right click) -->
        <ul id="contextMenu">
            <li><a>{{contextMenu1}}</a></li>
            <li><a>{{contextMenu2}}</a></li>
        </ul>
    </div>

This is typescript:
        $("#contextMenu").ejMenu({           
            menuType: ej.MenuType.ContextMenu,
            openOnClick: false,
            contextMenuTarget: "#mainMenuView"
        });

This is what I get by clicking anywhere:


Also, maybe there is possibility to fit all text into line? (Second line must be: Add to My Favorites)

Piramanayagam Ramakrishnan [Syncfusion]
Replied On February 21, 2017 11:35 AM UTC

Hi Agne, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: on my treeview I am trying to use Context menu. I want that context menu will show only when I click on node. Now it shows when I click on any place in container. 
 
We have analyzed your query. We can achieve your requirement (“I want that context menu will show only when I click on node”) in Menu control by specifying contextMenuTarget as TreeView node (“#mainMenuView .e-text”). Please refer to the below code example, 
 
[ts] 
 
$("#contextMenu").ejMenu({             
    menuType: ej.MenuType.ContextMenu, 
    openOnClick: false, 
    contextMenuTarget: "#mainMenuView .e-text" 
}); 
 
 
Query 2: Also, maybe there is possibility to fit all text into line? (Second line must be: Add to My Favorites) 
 
We are not able to reproduce the reported issue at our end, refer to the attached sample. Please ensure whether any CSS in your page overrides the context menu’s default properties. 
 
For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: Sample 
 
To run the application, execute below command, 
1.     npm install 
2.     npm start 
 
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information to proceed further. 
 
Regards, 
Piramanayagam R 


Agne
Replied On February 21, 2017 12:52 PM UTC

Hello,

it works perfectly! But I have one more question - what event is best to choose to initialize Context menu? Because when it is used in ready event, only the first node have context menu, because when application loads only the first node is shown. Treeview is loading on demand (loadOnDemand: true).
Maybe I need to use nodeExpand event also that all treeview nodes had context menu? Or maybe there is better event for this?

Piramanayagam Ramakrishnan [Syncfusion]
Replied On February 22, 2017 06:04 AM UTC

Hi Agne, 
 
Thanks for your update.   
 
You have to use ready event to initialize the Context Menu. The nodeExpand event will be triggered while expanding the TreeView node, but ready event will be triggered initially when TreeView nodes are loaded successfully.    
 
In load on demand concept, child nodes will be rendered after expanding the parent node. Now bonded target will be changed for Context Menu, so that, Context Menu will not be opened for newly rendered node.    
 
To resolve this issue, you have to prevent the Context Menu opening anywhere except the TreeView node in beforeOpen event of Context Menu. You need to specify contextMenuTarget as TreeView (“#mainMenuView”) instead of specifying TreeView node (“#mainMenuView .e-text”). Please refer to the below code example.   
 
[ts] 
 
$("#contextMenu").ejMenu({ 
    menuType: ej.MenuType.ContextMenu, 
    openOnClick: false, 
    contextMenuTarget: "#mainMenuView", 
    beforeOpen: function (args) { 
        //check whether the target is TreeView node or not  
        if (!$(args.target).hasClass("e-text")) 
            args.cancel = true; // prevent to open the Context Menu other than the TreeView node 
    } 
}); 
 
 
For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: Sample   
 
To run the application, execute the below commands,   
1.     npm install   
2.     npm start   
 
Please let us know whether the provided sample was helpful in achieving your requirement. If not, send us more information to proceed further.   
 
Regards,   
Piramanayagam R. 


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.

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

;