jsTree contextmenu does not work along with jsTreeGrid

Question

I am new to jsTree. As I am in need to represent the node types also along with node names, I have moved to jsTreeGrid. I am in a need to create nodes, rename, delete, edit the tree nodes as well as edit the node types in the second column of the jsTreeGrid. Somehow I could edit the second column (ie.,type column) but the jsTree just displays the contextmenu but their corresponding functions are not called. Help on this would be very useful. Here is my code:

<div id="container"></div>
<script type="text/javascript">
        $(document).ready(function(){
            var data;

            data = [{
                text: "Satellite City",
                data: {type: "<b>Project</b>", size: "30",spanclass:"root"},
                children: [
                    {text: "Phase-1", data: {type: "<i>Phase</i>", size: "50",spanclass:"first"}},
                    {text: "Phase-2", data: {type: "<i>Phase</i>", size: "50",spanclass:"second"}, children:[
                        {text:"Ruby Towers",data:{type: "<i>Tower</i>",size:"50",spanclass:"third"}}
                    ]}
                ]
            }];


            $("div#container").jstree({
                plugins: ["themes", "json", "grid", "dnd", "contextmenu", "search"],
                core: {
                    data: data
                },
                grid: {
                    columns: [
                        {width: 300, header: "WBS Tree",title:"_DATA_"},
                        {width: 100, 
                         cellClass: "col1", 
                         value: "type", 
                         header: "<i>Node Type</i>",                
                         valueClass:"spanclass"                                        
                        },
                    ],
                    resizable:true,
                    contextmenu:true
                },
                dnd: {
                    drop_finish : function () { 
                    }, 
                    drag_finish : function () { 
                    }, 
                    drag_check : function (data) { 
                        return { 
                            after : true, 
                            before : true, 
                            inside : true 
                        }; 
                    } 
                }
            });

            $("input#search").keyup(function (e) {
                var tree = $("div#container").jstree();
                tree.search($(this).val());
            });

        });
</script>

Answer 1

I think your problem might be in the jsTree config. Try adding "check_callback": true to its core.

Or check out working fiddle - JS Fiddle.