In jsTree component available a ContextMenu plugin.
But it's available only when user clicked on specific node.
I need to add context menu by clicking on component's background (to add root nodes, for example).
Is it possible to attach a context menu plugin for background ?
Yes you can, but you need to define all actions you need to be available, as the defaults are related to a node, so they won't work (rename, delete, etc).
This will show a menu when the tree container is clicked and will show an option to create a root node:
$('#tree').on('contextmenu.jstree', function (e) {
e.preventDefault();
if($(e.target).is('#tree')) {
$(document).one("context_show.vakata.jstree", $.proxy(function (e, data) {
var cls = 'jstree-contextmenu jstree-default-contextmenu';
$(data.element).addClass(cls);
}, this));
$.vakata.context.show($(this), { 'x' : e.pageX, 'y' : e.pageY }, {
"create" : {
"separator_before" : false,
"separator_after" : false,
"_disabled" : false,
"label" : "Create",
"action" : function (data) {
var inst = $.jstree.reference(e.target);
inst.create_node(null, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);
});
}
}
});
}
});
Related
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙ or ...) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
My first question why I cant get into 'check_node.jstree' event although I check a checkbox in tree..
And second. Here is my tree definition each time I click expand button which trigger 'before_open.jstree' event and refresh tree with new datas.. but after it rebuild tree it triggs the the event again and post to server.. how can I just refresh tree then stop the work.
$('#tree_2').jstree({
'plugins': ["checkbox","types","json_data" ,"ui"],
'core': {
"themes" : {
"responsive": true,
"icons":true
},
'data': [{}]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
}
}).bind('check_node.jstree', function (e, data) {
debugger
alert("check_node.jstree")
}).bind('before_open.jstree', function (e, datap) {
$.ajax({
url: "../../Controller/ActiveDirectoryController.php5",
type: "POST",
dataType: "json",
data: datap.node.text,//selected node text
success: function (result) {
debugger
if(result.Objects.length>0)
{
passOpen=false;
treeData_ = prepareObjectsforTree(result.Objects);
resfreshJSTree(treeData_);
}
},
error: function (a, b, c) {
}
})
})
and rebuild jstree with response data:
function resfreshJSTree(treeDataa) {
$('#tree_2').jstree(true).settings.core.data = treeDataa;
$('#tree_2').jstree("refresh");
}
check_node.jstree will only fire if checkbox.tie_selection is set to false in your config. If it is not - listen for select_node.jstree (or changed.jstree).
As for the second question - do not implement lazy loading this way - please read the docs on lazy loading - that is not the way to achieve it.
Here is the JavaScript code to prevent the double click event
$("#jstree_view").on("dblclick", 'li a', function (e) {
e.preventDefault();
});
but it is not working.
set the $.jstree.defaults.core.dblclick_toggle = false
example:
$('#jstree').jstree({
"core" : {
"dblclick_toggle" : false
}
});
jstree API
I'm using jstree_pre1.0_fix_1. And I want to have the preselected menu.
javascript is following,
$("#Menu").jstree({
"plugins" : [ "themes", "html_data", "ui"],
"ui" :{ "initially_select" : ["#MENUITEM_012"] },
"themes" : {
"theme" : "custom",
"dots" : false,
"icons" : false,
},
}).
bind("select_node.jstree", function(e,data) {
window.location.href = data.rslt.obj.children("a").attr("href");
});
When jstree is loaded, it selects a node(#MENUITEM_012), then window.location.href is changed, then jstree loaded and selects a node again.
How can I escape this situation.
Just found the solution. The problem is caused by the library trying to select the node( i.e. to make it appear selected after the navigated page is loaded). And handler had been set when a node is visited to navigate the page to another page.
The solution is to make sure that the node is selected with a mouse click.
.bind("select_node.jstree", function(e,data) {
var evt = window.event || event;
var button = evt.which || evt.button;
if( button != 1 || ( typeof button == "undefined")) return true;
window.location.href = data.rslt.obj.children("a").attr("href");
})
Answer myself;
remove
.bind("select_node.jstree", function(e,data) {
window.location.href = data.rslt.obj.children("a").attr("href");
})
add
$(".jstree li a").live("click", function(e) {
window.location.href = $(this).attr("href");
});
I was able to successfully init all the examples of jsTree, but there was no example on how to create a new div on-the-fly and have it as a legitimate object for dropping into jsTree.
I tried playing a bit with drag_target, dnd_prepare but no luck.
I tried this code:
"dnd" : {
"drop_finish" : function () {
alert("DROP");
},
"drag_check" : function (data) {
alert("drag_check");
if(data.r.attr("id") == "phtml_1") {
return false;
}
return {
after : false,
before : false,
inside : true
};
},
"drag_finish" : function (data) {
alert("DRAG OK");
}
But none of the alert boxes was called.
(I am referring to http://www.jstree.com/documentation of course)
ok I've found my mystake. One set class as 'jstree-draggable' on another div which will serve as the basis for cloning