JsTree contextmenu error - javascript

A javascript error indicating that this.rename(obj) is not defined when selecting to rename a node.
JavaScript runtime error: Object doesn't support property or method 'rename'
$(document).ready(function () {
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
contextmenu: {
items: {
"rename" : {
"label": "Rename",
"action": function (obj) { this.rename(obj); }
}
}
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
debugger;
alert("RENAMING!!!");
});
});
I have also tried the following code and am able to select and do a rename but cannot capture the change event.
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
alert("RENAMING!!!");
});

I think the method you are looking for is edit. But first you have to get the node of the tree. Try to use this code below:
...
"contextmenu" : {
"items" : renameItem : { // The "rename" menu item
label : "Rename",
action : function (obj) {
n = $('#marketing-category-tree').jstree(true).get_node(obj.reference); //get node
$('#marketing-category-tree').jstree(true).edit(n); //puts the node into edit mode
}
}
}
...
HTH

Your first code example ain't gonna work because
"action": function (obj) { this.rename(obj); }
in this case "this" is a point to Window object the next things is that documentation http://www.jstree.com/api/ doesn't have mentions of method rename and only rename_node
Here is the working example (right click at any node and then click on rename)
http://jsfiddle.net/w9snc6z1/4/
Pay attention that rename_node also not working but according to documentation
set_text: set the text value of a node. Used internally, please use rename_node(obj, val).
it's not recommended to use set_text instead of rename_node.

you should get node of the tree with var tree = $("#marketing-category-tree").jstree(true);then operate on nodes.
u can use this example
goodluck
:)

Related

Froala Editor use generic properties and add custom one

I have some Froala Editor inputs and I want to use generic propierties for all of them and then add some custom properties according to the current input.
For assign the froala object I use this code:
new FroalaEditor('.froala-editor-inline-horari', {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
I want to use some generic properties as a constant like:
const FROALA_PROPERTIES = {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
and then add to this object some modification like:
events: {
initialized: function () {
this.html.set('some value');
}
so, in this example I want to obtain the first object FROALA_PROPERTIES plus the new events: {...} key.
Is it this possible?
I answer myself because I found the solution. I can add this keys and values or functions by the next code:
FROALA_PROPERTIES.events.initialized = function () {
this.html.set('some value');
}
But if events key doesnt exist, then I need to create it first.
I based my andwer by this web research: http://researchhubs.com/post/computing/javascript/add-a-key-value-pair-to-a-javascript-object.html

Jstree context menu supress changed event on select_node right click

Im trying to find a way I can suppress the changedevent in jstree when loading a dynamic context menu (right click). I'm aware that you can suppress the select_node event in the context menu but I need to get the node id of the node that I am right clicking on. (and therefore need to use the select_node). I know that you can suppress that changed event when calling select_node regularly, but I'm not sure how to do it when right clicking. I tried the following with the context menu select_node, but it did not work:
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
"variant": "small",
"icons": false
}
},
"contextmenu": {
"items": reportMenu(node), //builds context menu based on selected node
},
"plugins": ["contextmenu", "changed"]
});
});
$("#myTree").bind('select_node.jstree', function (event, data) {
// Does not work, changed event still fires.
$("#myTree").jstree().select_node(data.node.id, true);
});
I'm looking for one of the possible alternatives:
How can I suppress the changedevent when the context menu calls select_node?
How can I get the id of the node I am right clicking on without calling the select_node event (i.e. If I set my contextmenu to 'select_node': false, how can I capture the select node)?
Finally, I think you can get what you want changing your code a little.
Check demo - codepen.
$('#myTree')
.jstree({
'core': {
'data': ...
},
'plugins': ["contextmenu"],
'contextmenu': {
'select_node': false,
'items': reportMenu
}
});
function reportMenu(node) {
// access node as: node.id);
// build your menu depending on node id
return {
createItem: {
"label": "Create New Branch",
"action": function(obj) {
this.create(obj);
alert(obj.text())
},
"_class": "class"
},
renameItem: {
"label": "Rename Branch",
"action": function(obj) { this.rename(obj); }
},
deleteItem: {
"label": "Remove Branch",
"action": function(obj) { this.remove(obj); }
}
};
}

jsTree select checkbox independent to hierarchy

I'm using jsTree with checkboxes, and it checks all the parent nodes when selecting a child.
Is there a way to select each node individually regardless to the hierarchy?
Currently:
Desired:
Here's my code:
$(function () {
$('#tree').jstree({
"checkbox": {
"two_state": true,
"real_checkboxes": true,
//this is supposed to fix it but it doesn't
"override_ui": true
},
"plugins": ["themes", "ui", "checkbox"]
});
$('#tree').jstree("hide_icons");
$('#tree').jstree("hide_dots");
});
Here is the documentation.
For the current master version in GitHub (2.0.0 alpha),
$(function () {
$('#demo1').jstree({
"checkbox": {
"three_state": false
},
"core": {
"themes": {
dots: false,
icons: false
}
},
"plugins": ["html_data", "themes", "ui", "checkbox"]
});
});
hope this helps.
Using 3.3.8 version of jsTree, yes, instead of using two_state:true, use "three_state": false in checkbox plugins.
#shakib is right above. For complete and working source code, you can refer https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes#GetAllCheckedNodeWithTriStateDisabled

Capturing the newly created node with JSTree contextmenu

I'm trying to capture the name of the newly created node with jstree's contextmenu. I can capture the name of the parent node that I'm adding the new node under (with obj.text()), however, what I really need is the name of the newly created node.
So, somehow, there needs to be an "onChange" event that can be called within jstree contextmenu that fires once the user hits enter on that newly created node?
Any ideas? I've enclosed the contextmenu code:
}).jstree({
json_data: {
data: RBSTreeModel,
ajax: {
type: "POST",
data: function (n) {
return {
NodeID: n.attr("id").substring(4),
Level: n.attr("name").substring(7)
};
},
url: function (node) {
return "/Audit/GetRequirementsTreeStructure";
},
success: function (new_data) {
return new_data;
}
}
},
contextmenu: {
items: function($node) {
return {
createItem : {
"label" : "Create New Branch",
"action" : function(obj) { this.create(obj); alert(obj.text())},
"_class" : "class"
},
renameItem : {
"label" : "Rename Branch",
"action" : function(obj) { this.rename(obj);}
},
deleteItem : {
"label" : "Remove Branch",
"action" : function(obj) { this.remove(obj); }
}
};
}
},
plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"]
});
You can bind to the "create.jstree" event, which will fire after a node is created. In the callback of that event, you will have access to the newly created node and can rollback/revert the create node action if you choose. The documentation for it is lacking, but there is an example on the demo page. Here is another example that came from my code:
}).jstree({... You jstree setup code...})
.bind("create.jstree", function(e, data) {
// use your dev tools to examine the data object
// It is packed with lots of useful info
// data.rslt is your new node
if (data.rslt.parent == -1) {
alert("Can not create new root directory");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
if (!FileNameIsValid(data.rslt.name)) {
alert("Invalid file name");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
.. Your code etc...
})
Based on Bojin Li's answer, it seems that the latest version of jsTree uses the event "create_node" instead of "create":
}).jstree({... You jstree setup code...})
.bind("create_node.jstree", function(e, data) {
...
});

[jsTree]: why the 'rename' and 'move' events are not fired with new nodes?

I am using jstree for a tree view in a web page.
The tree makes possible to rename and move nodes. Moving or renaming a node fires the rename_node.jstree and rename_node.jstree events.
With new nodes (created with rename_node.jstree events), the node can still be renamed and moved but the move_node.jstree and rename_node.jstree events are not fired.
It seems that the events are only bound with the inital nodes. I don't see any 'live' method to bind the events with nodes created after.
Is there any possibility to do that?
Here is a sample that helps (I hope) to understand my problem:
$(function(){
$("#nodes").jstree({
"plugins" : [ "themes", "html_data", "dnd", "ui", "crrm" ]
}).bind("move_node.jstree", function (event, data) {
alert('move');
}).bind("rename_node.jstree", function (event, data) {
alert('rename');
}).bind("create_node.jstree", function (event, data) {
alert('create_node');
})
$("#create_button").click(function () {
$("#nodes").jstree("create",null,"last",{data:"name"});
});
});
The command is create_node, not create, I think. See http://www.jstree.com/documentation/core for more details.
FYI, your code would be better written as:
$(function() {
$("#nodes").jstree({
"plugins": ["themes", "html_data", "dnd", "ui", "crrm"]
}).bind("move_node.jstree rename_node.jstree create_node.jstree", function(event, data) {
var type = event.type;
alert(type);
if (type === 'move_node.jstree') {
//handle move_node.jstree here
} else if (type === 'rename_node.jstree') {
//handle rename_node.jstree here
} else if (type === 'create_node.jstree') {
//handle create_node.jstree here
}
});
$("#create_button").click(function() {
$("#nodes").jstree("create", null, "last", {
data: "name"
});
});
});
I know that is subjective, but take it for what is worth.
It seems that the events are fired correctly. The problem was somewhere in the logic. I had to set the id of the item too to be handled correctly.
$("#nodes").jstree("create",null,"last",{data:the_name, attr: {id: the_id}});
Sorry for this mistake.

Categories