Implement right click Context menu in jQuery jsTree in ASP.Net Core MVC

lakshmi.teli95
 
on Sep 01, 2022 10:48 PM
596 Views

I am working on asp.net core where i want to add node after choosing context menu option create, delete and rename options.

$(document).ready(function () {
    $.ajax({
        async: true,
        type: "GET",
        url: "https://localhost:44376/Home/GetTree",
        dataType: "json",
        success: function (json) {
            createJSTree(json);
        }
    });
});
function createJSTree(jsondata) {

$('#simpleJsTree').jstree({
    "core": {
        "check_callback": true,
        'data': jsondata

    },
    "plugins": ["contextmenu"],
    "contextmenu": {
        "items": function ($node) {
            var tree = $("#SimpleJSTree").jstree(true);
            return {
                "Create": {
                    "separator_before": false,
                    "separator_after": true,
                    "label": "Create",
                    "action": function (obj) {
                        tree.create($node);
                    }

                },
                "Rename": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Rename",
                    "action": function (obj) {
                        tree.edit($node);
                    }
                },
                "Remove": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Remove",
                    "action": function (obj) {
                        tree.delete_node($node);
                    }
                },
                "Upload": {
                    "seperator_beore": false,
                    "seperator_after": false,
                    "label": "Upload",
                    "action": function (obj) {
                        tree.upload_node($node);
                    }
                }
            };
        }
    }
});
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 02, 2022 02:46 AM

Hi lakshmi.teli9...,

Refer below example.

Using the below article i have created the example.

ASP.Net Core MVC: Implement TreeView with CheckBoxes from Database using jQuery

Model

public class VehicleType
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class VehicleSubType
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int VehicleTypeId { get; set; }
}

public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

Controller

public class HomeController : Controller
{
    private DBCtx Context { get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }

    public IActionResult Index()
    {
        List<TreeViewNode> nodes = new List<TreeViewNode>();

        //Loop and add the Parent Nodes.
        foreach (VehicleType type in this.Context.VehicleTypes)
        {
            nodes.Add(new TreeViewNode { id = type.Id.ToString(), parent = "#", text = type.Name });
        }

        //Loop and add the Child Nodes.
        foreach (VehicleSubType subType in this.Context.VehicleSubTypes)
        {
            nodes.Add(new TreeViewNode { id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(), parent = subType.VehicleTypeId.ToString(), text = subType.Name });
        }

        //Serialize to JSON string.
        ViewBag.Json = JsonConvert.SerializeObject(nodes);
        return View();
    }
}

View

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="jstree">
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#jstree').jstree({
                "core": {
                    "check_callback": true,
                    "themes": { "variant": "large" },
                    "data": @Html.Raw(ViewBag.Json)
                },
                "plugins": ["contextmenu"],
                "contextmenu": {
                    "items": function ($node) {
                        var tree = $("#jstree").jstree(true);
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": true,
                                "label": "Create",
                                "action": false,
                                "submenu": {
                                    "File": {
                                        "seperator_before": false,
                                        "seperator_after": false,
                                        "label": "File",
                                        action: function (obj) {
                                            $node = tree.create_node($node, { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' });
                                            tree.deselect_all();
                                            tree.select_node($node);
                                        }
                                    },
                                    "Folder": {
                                        "seperator_before": false,
                                        "seperator_after": false,
                                        "label": "Folder",
                                        action: function (obj) {
                                            $node = tree.create_node($node, { text: 'New Folder', type: 'default' });
                                            tree.deselect_all();
                                            tree.select_node($node);
                                        }
                                    }
                                }
                            },
                            "Rename": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Rename",
                                "action": function (obj) {
                                    tree.edit($node);
                                }
                            },
                            "Remove": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Remove",
                                "action": function (obj) {
                                    tree.delete_node($node);
                                }
                            },
                            "Upload": {
                                "seperator_beore": false,
                                "seperator_after": false,
                                "label": "Upload",
                                "action": function (obj) {
                                    tree.upload_node($node);
                                }
                            }
                        };
                    }
                }
            });
        });
    </script>
</body>
</html>

Screenshot