I'm creating a tree using the jstree javascript library while using two jstree plugins:
checkbox plugin
types plugin
Here is a code example with
var mydata=[
id: "1",
parent: "#",
text: "node1",
},
{
id: "2",
parent: "#",
text: "node2",
type: "nodeattribute",
}];
$('#dqResultsJSTree').jstree(
{
'core' : {
'themes' : {
'variant' : 'large',
'icons' : false,
},
'data' : mydata,
},
'types' : {
'nodeattribute' : {
'icon' : 'http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/24/Letter-A-lg-icon.png',
},
},
'checkbox' : {
cascade : "",
three_state : false,
},
'plugins' : [ 'checkbox', 'types'],
});
The problem I'm having is that the type is not working. The node with id=2 does not show the icon defined at type nodeattribute. Does anybody have had this problem using while using the checkbox at the same time?
Thanks in advance.
Source: https://www.jstree.com/plugins/
You have to set 'icons': true in the core section of jsTree config.
I also fixed your JSON - need a { for first object in mydata.
See demo: JS Fiddle
Related
JsTree-grid plugin won't work as expected for me. I am getting node data (including data for grid columns) by AJAX request responding by JSON file.
JS snippet:
.jstree({
'core' : {
'data' : {
'url' : '/cms/ajax/ajax_json_tree.php?table=subpages_tree&operation=get_node',
'data' : function (node) {
return {
'id' : node.id,
'seo_title' : node.seo_title
};
},
'dataType' : 'json'
},
'check_callback' : true,
'themes' : {
'responsive' : false
}
},
'plugins' : ['state','dnd','contextmenu','grid'],
grid: {
columns: [
{width: 300, header: "Name"},
{width: 100, header: "SEO", value: "seo_title"}
]
},
'force_text' : true
})
JSON response from:
/cms/ajax/ajax_json_tree.php?table=subpages_tree&operation=get_node
[
{
"id":255,
"text":"NEWS",
"children":true,
"seo_title":"news"
},
{
"id":256,
"text":"DEVWEBMAIL",
"children":false,
"seo_title":"devwebmail"
}
]
Somehow node.seo_title is always undefined. Can you explain why this is? It seems the problem is with the grid plugin integration in jstree.
Versions: I am using jstree 3.3.3.0 and jstreegrid 3.4.2.
Finally, I`ve make it work. The problem was in JSON data file. It has to have a bit different data structure:
[
{
"id":255,
"text":"NEWS",
"children":true,
"data" {
"seo_title":"news"
}
},
{
"id":256,
"text":"DEVWEBMAIL",
"children":false,
"data" {
"seo_title":"devwebmail"
}
}
]
I need to map my List that's with in list but couldn't do it .
I tried using hasmany but it wont help .
Unless its mapping i'm unable to loop my tpl as its not detecting the proper objects.
Below is my Json:
{
"containers":[
{
"count":654,
"week":47
},
{
"count":779,
"week":48
}
],
"vessels":[
{
"count":44,
"week":47
},
{
"count":39,
"week":48
}
]
}
My model :
Ext.define('ContainerChartStore', {
extend : 'Ext.data.Model',
fields : [{
name : "containers",
type : Ext.data.Types.List
},{
name : "vessels",
type : Ext.data.Types.List
}],
hasMany: {
model: 'InboundObjects',
name: 'inboundObjects'
}
});
Ext.define('InboundObjects', {
extend: 'Ext.data.Model',
config: {
fields : [{
name : "count",
type : Ext.data.Types.NUMBERARRAY
},{
name : "week",
type : Ext.data.Types.NUMBERARRAY
}]
}
});
I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.
I am working with ng jsTree component https://github.com/ezraroi/ngJsTree
Here is my implementation
<div js-tree="treeConfig" ng-model="treeData" tree="treeInstance" tree-events="check_node:getSelectedCategories;uncheck_node:getSelectedCategories"></div>
JS code in controller
$scope.treeConfig = {
core : {
multiple : true,
animation: false,
error : function(error) {
$log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
},
check_callback : true,
worker : true
},
types : {
default : {
icon : 'glyphicon glyphicon-flash'
},
star : {
icon : 'glyphicon glyphicon-star'
},
cloud : {
icon : 'glyphicon glyphicon-cloud'
}
},
version : 1,
"checkbox" : {
"tie_selection" : false
},
plugins : ['types','checkbox']
};
$scope.treeData = [
{ id : 'ajson1', parent : '#', text : 'Simple root node', state: { opened: true} },
{ id : 'ajson2', parent : '#', text : 'Root node 2', state: { opened: true} },
{ id : 'ajson3', parent : 'ajson2', text : 'Child 1', state: { opened: true} },
{ id : 'ajson4', parent : 'ajson2', text : 'Child 2' , state: { opened: true}}
];
$scope.getSelectedCategories = function(e, data) {
console.log('data: ', data);
};
So, when I check 'ajson2' node, data returned with selected attribute is 'ajson2', but when I uncheck 'ajson2', data returned with selected attribute is 'ajson3', 'ajson4'.
Looks like this is bug, or am I missing anything?
Console logging 'data' was not giving correct information.
Just figured out solution. updated $scope.getSelectedCategories() as follows
$scope.getSelectedCategories = function() {
var selected_nodes = $scope.treeInstance.jstree(true).get_checked(true);
console.log(selected_nodes);
};
which logs selected node object/s.
I have a kenodui treeview that I am trying to expand the top level nodes if they have the following values: "Active" or "Closed", the remaining nodes can remain closed. I am using the following code to create my treeview:
if (CI.Popup.treeview == null) {
CI.Popup.treeview = $("#RelatedPropertyListing").kendoTreeView({
template: "#= item.Name #",
dataImageUrlField: "image",
dataSource: CI.Popup.treeDS,
dataTextField: ["Name", "Name"],
encoded: true
}).data("kendoTreeView");
}
My datasource is defined as a json kendo.data.HierarchicalDataSource. I have tried generating the treeview using html instead of a datasource but it was unbareably slow so I have to use this method.
Any ideas how I can expand only those nodes that have a value of "Active" or "Closed"???
Thanks in advance for any help.
If you can slightly change your returned data, you can set expanded to true for each node that you want expanded and KendoUI will automatically take care of it.
Example:
var data = [
{
text : "node 1",
expanded: true,
items : [
{ text: "node 1.1" },
{
text : "node 1.2",
expanded: false,
items : [
{ text: "node 1.2.1" },
{ text: "node 1.2.2" },
{ text: "node 1.2.3" }
]
},
{ text: "node 1.3" }
]
}
];
var treeview = $("#treeview-left").kendoTreeView({
dataSource : data,
loadOnDemand: true
}).data("kendoTreeView");
JSFiddle in here