Adding custom right click menu to the nodes of treeview in MVC - asp.net

Question

This is my helper for generating a treeview.
Using this i am able to generate the treeview in the mvc5.
#helper GetTreeView(List<MvcTreeview.Models.Category> siteMenu, int parentID)
{
foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parentID)))
{
<li>
#{var submenu = siteMenu.Where(a => a.ParentID.Equals(i.ID)).Count();}
#if (submenu > 0)
{
<span class="collapse collapsible"> </span>
}
else
{
<span style="width:15px; display:inline-block"> </span>
}
<span id="Category">
#i.CategoryName
#*oncontextmenu="return false"*#
</span>
#if (submenu > 0)
{
<ul>
#Treeview.GetTreeView(siteMenu, i.ID)
#* Recursive Call for Populate Sub items here*#
</ul>
}
</li>
}
}
This is my View for displaying
#model List<MvcTreeview.Models.Category>
#{
ViewBag.Title = "Simple";
}
<div class="gridbox gridleft">
<div class="left">
<div style="padding:10px; background-color:#FAFAFA">
<div class="treeview">
#if (Model != null && Model.Count() > 0)
{
<ul>
#Treeview.GetTreeView(Model, Model.FirstOrDefault().ParentID)
</ul>
}
</div>
</div>
</div>
</div>
<div id="onSuccess">
</div>
#* Here We need some Jquery code for make this treeview collapsible *#
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
function PassingFunction(clicked_id) {
url = '#Url.Action("Details", "TestDetails")';
$.ajax({
url: url,
type: 'GET',
data: { 'id': clicked_id },
success: function (returnData) {
$("#onSuccess").html(returnData);
console.log(returnData);
},
error: {
}
});
}
</script>
}
Now i want to add the custom functionalities to the nodes of the treeview
Add
Delete
Edit
How can i do that?

Answer 1

There is a lot of JQuery Context Menu options on this link.
I have just picked the most forked of them, jQuery contextMenu.
I created a JSFeed fork in an example of treeview using UL/LI and created this JSFiddle with the Context-Menu to help you:
http://jsfiddle.net/mqueirozcorreia/0h82qto6/
Explaining the code:
I have added the externals resources:
http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js
All the magic goes in the javascript code, configuring the context-menu.
The selector property will put the context menu in every element of type <span> and having class attribute with value "contextMenuItem":
selector: 'span.contextMenuItem',
When the user clicks the callback function below runs. In this example, it alerts/logs what key was selected and the id attribute value.
callback: function(key, options) {
var m = "clicked: " + key + " on element of id " + options.$trigger.attr("id");
window.console && console.log(m) || alert(m);
},