Hi Laszlo
Thanks for contacting Syncfusion
Your requirement of using different context menu in different level of TreeView Control can be achieved by setting the id for ul of particular level in TreeView ClientSideOnLoaded event and then assign this id as Context menu target id. Please refer the following code snippet.
<code>
[.cshtml]
@{Html.Syncfusion().TreeView("myTreeView", new { @class = "style" })
.ShowLines(true)
.AllowEdit(true)
.Width(300)
.Height(460)
.DataSource((System.Collections.IEnumerable)ViewData["TreeViewData"])
.BindTo(fields => fields
.Id("ID")
.ParentId("ParentID")
.Text("MenuText")
).ClientSideOnLoaded("onload").Render();}
<ul id="myMenu1">
<li> <a>Cut</a></li>
<li> <a>Copy</a></li>
<li> <a>Paste</a></li>
</ul>
@*--Menu Helper1--*@
@{ Html.Syncfusion().Menu("myMenu1").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("myTreeView_DataBinding").Render(); }
<ul id="myMenu2">
<li> <a>Add</a></li>
<li> <a>Remove</a></li>
</ul>
@*--Menu Helper2--*@
@{
Html.Syncfusion().Menu("myMenu2").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("level1").Render(); }
<ul id="myMenu3">
<li> <a>childnode Add</a></li>
<li> <a>Child node Remove</a></li>
</ul>
@*--Menu Helper3--*@
@{
Html.Syncfusion().Menu("myMenu3").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("level2").Render(); }
<script type ="text/javascript" >
function onload() {
$("#1").children("ul").attr("id", "level1");
$("#4").children("ul").attr("id", "level2");
}
</script>
</code>
Note: Currently we do not provide Context Menu with ContextTargetid as Class Name.
We have prepared a sample to show case this behavior. It can be downloaded from given below link
Kindly check the sample, let us know if it helps.
Warm Regards,
Gurunathan
Hi Laszlo,
Thanks for contacting Syncfusion support.
Since, we are using different ContextMenu's for each level, the ContextMenu opened previously was not hidden when a new ContextMenu is opened. So, can you please manually hide the context menus which is opened previously before opening a new ContextMenu? Please refer the below given code snippet to resolve this issue,
[view]
@{ Html.Syncfusion().Menu("myMenu1").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("myTreeView_DataBinding").ClientSideOnBeforeContextOpen("closemenu").Render(); }
@{ Html.Syncfusion().Menu("myMenu2").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("level1").ClientSideOnBeforeContextOpen("closemenu1").Render(); }
@{ Html.Syncfusion().Menu("myMenu3").Mode(MenuModel.ModeType.ContextMenu).ContextMenuTargetId("level2").ClientSideOnBeforeContextOpen("closemenu2").Render(); }
<script type ="text/javascript" >
function closemenu2()
{
$find("myMenu1").HideContextMenu();
$find("myMenu2").HideContextMenu();
}
function closemenu1() {
$find("myMenu1").HideContextMenu();
$find("myMenu3").HideContextMenu();
}
function closemenu() {
$find("myMenu3").HideContextMenu();
$find("myMenu2").HideContextMenu();
}
</script>
</code>
We have prepared a simple sample to exhibit this behavior. It can be downloaded from given below link.
Kindly check the sample, let us know if you have further queries.
Warm Regards,
Gurunathan
I came across this thread looking for something similar to this.
So let me leave here some example of setting the contenxtmenu depending on an attribute of the node:
$("#menuEmployees").ejMenu({
menuType: ej.MenuType.ContextMenu,
openOnClick: false,
contextMenuTarget: "li[data-nodetype='employee']",
click: "menuclick",
beforeOpen: "beforeOpen"
});
Hi Rui,
Thanks for updating an example to showcase ‘how to set up a context menu in Treeview based on particular attribute in a node’.
We would also like to let you know that, the target for the context menu can also be a class instead of ID. So, we can apply context menu to many elements having same class. We have attached a simple sample in the following location to showcase this.
Sample Location: context menu using class
Please let us know if you have any queries.
Regards,
HariKrishnan
Hi Rui,
Query: But the basic idea here is to show that the target is actually any kind of string that can be used as a JQuery selector. I think this is something that you should change in the documentation, just say in the docs that we can use any kind of jquery selector expression.
Thanks for pointing about the correction that we have to do in our documentation, regarding the description of ‘contextMenuTarget’ API. As you have mentioned, we can use any kind of string as a JQuery selector for setting the target of context menu. We will make this correction in our documentations and will also refresh it in our online JS API reference link.
Please let us know if you have further queries.
Regards,
HariKrishnan