Create custom item in jsTree Context menu

Question

I create a treeview using jsTree with contextmenu in asp.net mvc3.

<div id="divtree">
<ul id="tree">
    <li><a href="#" class="usr">@Model.Name</a>
        @Html.Partial("Childrens", Model)
    </li>
</ul>

<script type="text/javascript">
$(function () {
    $("#divtree").jstree(
        {
            "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
        });
});

it's works fine.

I want to create a custom item in the context menu. For example create a new menu item. New for create new Employee in the context menu, and insert the employee in DB. I use a jQuery POST function for this task. But how to handle the click event in the Context menu item.

Answer 1

Here's how you could customize the contextmenu plugin:

$("#divtree").jstree({
    "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"],
    "contextmenu": {
        "items": function ($node) {
            return {
                "Create": {
                    "label": "Create a new employee",
                    "action": function (obj) {
                        this.create(obj);
                    }
                },
                "Rename": {
                    "label": "Rename an employee",
                    "action": function (obj) {
                        this.rename(obj);
                    }
                },
                "Delete": {
                    "label": "Delete an employee",
                    "action": function (obj) {
                        this.remove(obj);
                    }
                }
            };
        }
    }
});

Alright, in this example I am only calling the base function inside the click handlers: this.create(obj);, this.rename(obj); and this.remove(obj); where obj will be the node that was clicked.

So now for example if you want to send an AJAX request to the server when a new item is added you could subscribe to the create.jstree event as shown in the demo page of the jsTree documentation:

<script type="text/javascript">
    $("#divtree").jstree({
        "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"],
        "contextmenu": {
            "items": function ($node) {
                return {
                    "Create": {
                        "label": "Create a new employee",
                        "action": function (obj) {
                            this.create(obj);
                        }
                    },
                    "Rename": {
                        "label": "Rename an employee",
                        "action": function (obj) {
                            this.rename(obj);
                        }
                    },
                    "Delete": {
                        "label": "Delete an employee",
                        "action": function (obj) {
                            this.remove(obj);
                        }
                    }
                };
            }
        }
    })
    .bind("create.jstree", function (e, data) {
        $.ajax({
            url: "@Url.Action("create", "employees")", 
            type: 'POST',
            data: {
                "name" : data.rslt.name
            },
            success: function (result) {
            }
        });
    });
</script>

Inspect the e and data arguments that are passed to the create.jstree event callback. They contain lots of useful information about the newly created node that you could use to send along with the AJAX request.

Inspired by this example you could continue extending it with the remove.jstree and rename.jstree events as shown in the documentation. So when you look at it, all that was needed was to read the documentation. For example I've never used jsTree in my life but 5 minutes was all that it took me to find the example in the documentation and do a quick spike for you. So next time you have a programming related question about some plugin or framework that you are using please put more efforts into reading the documentation first.