Treeview context menu. Show menu only on nodes

[Agne]

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]

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]

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]

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.