Icon with Type plugin and data-jstree ?

[Lee Middlebrook]

I'm lost spent over an hour trying to figure this out...

I know that I need the node <li> to look something like this <li data-jstree = '{ "type" : "Area" }' ....></li> to match my type definition...

for type icons to work, however I'm at a loss to exactly how I currently add that attribute to the node...

I load the tree all at once with a json object with nested childern[ ]..

Does this have something to do with li_attr? if so what should this look like.. the doc specifies li_attr {}... that is it..

Any help would a be appreciated

Regards,

[Ivan Bozhanov]

Are you using HTML or JSON - please show me your config and some sample data.

Best regards,
Ivan

[Lee Middlebrook]

Good day, thank you for replying!

I'm using the Json with children [ ] method  see example

Config

$('#areatree').jstree({

'core': {

"check_callback": true,

'data': {

'url': 'getallareas?excludeTables=false'

},

"themes": {

"variant": "large",

},

},

"state": {"key": '<%=Request.QueryString["type"]%>_infotree'},

"types": {

default: {

"max_children": 10000,

"max_depth": 10,

"icon": "glyphicon glyphicon-th"

},

"#": {

"valid_children": ["Area"],

"icon": "glyphicon glyphicon-th",

},

"Area": {

"icon": "glyphicon glyphicon-th",

"valid_children": ["Pit", "Area"]

},

"Pit": {

"icon": "glyphicon glyphicon-th-list",

"valid_children": ["Table"]

},

"Table": {

"icon": "glyphicon glyphicon-minus",

"valid_children": []

}

},

"dnd": {

check_while_dragging: true,

},

"plugins": ["contextmenu", "dnd", "state", "search", "sort", "type", "unique"]

}); 

Json example - finally realised the li_attr and a_attr implemented as hashmap<string, string>

{
"id":"ff80818143e87a7b0143e8ebec2d0005",
"text":"Area1",
"icon":"glyphicon glyphicon-th-large",
"state":{"opened":false,"disable":false,"selected":false},
"li_attr":{},"a_attr":{"type":"area"},
"type":"Area",
"children":[
	{"id":"ff808181463de59801463ded08050002",
		"text":"Pit2",
		"icon":"glyphicon glyphicon-th-list",
		"state":{"opened":false,"disable":false,"selected":false},
		"li_attr":{},
		"a_attr":{"type":"area"},
		"type":"Pit","children":[],
		"parentId":"ff80818143e87a7b0143e8ebec2d0005",
		"hasChildren":true,
		"movable":true,
		"name":"Pit1"
	}
],
"parentId":"ff80818143103928014310392a350003",
"hasChildren":true,
"movable":true,
"name":"Area1"}

I end up hard coding the icons as you can see in the Json... but would prefer the types icon method...

I tried following this... but I could figure out how to get it to insert to attribute with a single quote..

The type is not read off of the rel attribute. Try using <li data-jstree='{ "type" : "floor" }'... in your markup (and keep the single quotes outside, and the double quotes - inside for the data-jstreeattribute).

https://github.com/vakata/jstree/issues/497

I managed to get the attriube as  either 

data-jstree="'{ "type" : "floor" }'"
or
data-jstree="{ 'type' : 'floor' }"

Regards,

Lee

[Ivan Bozhanov]

The "type" property you have set is correct no need for anything more. Besides adding "types" to your plugins array (and not "type") - currently the plugin is not active on your instance :)

Cheers,
Ivan

[Lee Middlebrook]

My bad it appears the late nights are catching up with me... :)

Anyway I enabled the plugin with "types" and injected the data-jstree attribute to the <li></li> node it is generated like this:

<li role="treeitem" data-jstree="{ 'type' : 'Area' }" aria-expanded="false" id="ff80818145606a6b014593cb961b001d" class="jstree-node  jstree-closed" aria-selected="false">

 

but it still didn't work, I am left with default "folder" Icons....

Regards,

Lee

[Ivan Bozhanov]

Do not use data-jstree, the "type" property in the JSON is enough (and remove the hardcoded icons). Also - I see you set an icon on the "#" - that will have absolutely no effect, use "#" only to limit root node types, count or depth.

Best regards,
Ivan

[Lee Middlebrook]

You are a star!

I removing the icon field from my Json object and it's working now!

Thanks for the great support!

Kind regards,

Lee