display document icon for some nodes

[Marco Aguirre]

This might be a dumb question, but i sincerely don't seem to be able to find the answer.

I'm using jstree display folders and documents, a document has a type 1 and a folder a type 0.
I want to give the documents the default document icon that is used all over the demo page but I can't seem to find a way.

Any help would be greatly appreciated.

[Ivan Bozhanov]

Well, simply use the code that is on the right of the demo page - the types plugin configuration. Try that and show me your config if it still does not work.

Best regards,
Ivan

[Ivan Bozhanov]

Sorry, this is not me - its a bug with the groups page - 3 times I click "Always publish opinions from this author" (you) and 3 times it says that its spam and deletes it. Try using another email? Sorry, but it is not something I do.

31 март 2014, понеделник, 02:05:26 UTC+3, Marco Aguirre написа:

[irco]

trying a new email. 

I thought some mod of the group decided not to let me post anymore, thanks for the clarification. 

this is my tree

$('#tree').jstree({
                'core': {
                    'plugin': ['themes', 'types'],
                    'types': {
                        "default": {
                            "icon": "glyphicon glyphicon-file",
                            "valid_children": ["default", "file"]
                        },
                        "file": {
                            "icon": "glyphicon glyphicon-file",
                            "valid_children": []
                        }
                    },                   
                    'check_callbacks': true,
                    'themes': { 'stripes': true },
                    'data': {
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        url: 'V2_DocTreeView.aspx/GetChildrenFor',
                        data: function (node) {
                            var group = 0;
                            if (node.id == "#")
                                group = getParameterByName("group");
                            else
                                group = node.id;
                            return '{id: "' + group + '"}';
                        }
                    }
                }
            }
            )

And here is some of my response (I have set all the nodes's type to file just to see if i could get any changes) :

{"d":

[

{"__type":"Doc","text":"Common","id":"6","childrenID":null,

"state":{"opened":false,"disabled":false,"selected":false},

"children":true,"a_attr":null,

"data":{"link":"V2_DocsView.aspx?key=54","eType":"0"},"type":"file"},

{"__type":"Doc","text":"All Plants","id":"773","childrenID":null,"state":{"opened":false,"disabled":false,"selected":false},"children":true,

"a_attr":null,

"data":{"link":"V2_DocsView.aspx?key=20003","eType":"0"},"type":"file"}

And when a node is opened

{"d":[{"__type":"Doc","text":"The Big Book of Logos","id":"3718","childrenID":null,"state":{"opened":false,"disabled":false,"selected":false},"children":false,"a_attr":null,"data":{"link":"V2_DocsView.aspx?key=520900","eType":"1"},"type":"file"}]}

I understand the concept of types (I think) but i also see the __type set to Doc and not sure what to do about that 

Any ideas

[irco]

the __doc is my type name from the Model in the server side sorry, for a second i thought i was looking at the actual tree. 

[Ivan Bozhanov]

This is how your config should look:
           $('#tree').jstree({
                'core': {
                    'check_callback': true,
                    'themes': { 'stripes': true },
                    'data': ...

                },
                'types': {
                    "default": {
                        "icon": "glyphicon glyphicon-file",
                        "valid_children": ["default", "file"]
                    },
                    "file": {
                        "icon": "glyphicon glyphicon-file",
                        "valid_children": []
                    }
                },

                'plugins': ['types']
            })

1) plugin should be plugins and is outside of core
2) types is outside of core too
3) check_callbacks is "check_callback" (but that has no effect on the types and icons).

Best regards,
Ivan

[irco]

oh wow, look at that, I am an idiot. 

I forgot core was even there. Thank you, i spent more hours than i care to admit looking at it and didnt check that. 

One last question, I have the style.css and the png files in a subfolder  called Styles but it seems like the file icon doesn't show up. 

is there something else i need to do for the glyphicon-file other than link the style sheet? 

[Ivan Bozhanov]

I thought you were using twitter bootstrap - the glyphicon classes come from there.

If you want to use the icon in the jstree sprite you have to reference it manually - create your own class and in your css add:
.my-custom-class { background:url(...) XXpx XXpx no-repeat; }

and in your config for the type use:
"icon" : "my-custom-class"

Best regards,
Ivan

[irco]

oh i see! thank you again.

[Ivan Bozhanov]

Btw - I just added a fix - if you get the latest source from github you can use "jstree-file" for the icon property and it will display the document icon automatically (no need to add your own CSS).

Best regards,
Ivan

[irco]

oh wow you're awesome! I was having problems with assigning the sprite-style, i could see the style got assigned to the node but the image wouldn't display, but this works perfectly. Thank you so much.

[tmac]

How do I do this with a minified js file?

[Ivan Bozhanov]

Minification is not related to this at all - in your config or data source specify the icon property as "jstree-file" - that is all. Nothing to do with minification.

Best regards,
Ivan

[tmac]

I was not the one who installed this - trying to find where everything is configured.

On Monday, March 30, 2015 at 10:38:03 AM UTC-4, tmac wrote:

Where is the config, though? In the jstree.js file? 

[Marco Aguirre]

you first need to find the js code where the jstree is being initialized.

That's what he means by the config. Look for something like

$('#WhateverYourTreeNameIs').stree({

                'core': {
                    'check_callback': true,
                    'themes': { 'stripes': true },
                    'data': ...

               });

That is your config is and where you define your data source.

[tmac]

Never mind - got it. Thanks!