jstree icon problem & how to 'click to expand'

Question

I am using jsTree for creating a documentation list index.I use JSON to create my tree. I have a problem and a question.

My problm is, the same icon (default icon set in types) appears for both folders and files. When i change the default icon, all tree icons set to that icon. If i do not use types plug-in, default folder icon is used for all icons.

my jstree config

$("#agac_tutacagi").jstree({ "plugins" : [ "themes", "json_data", "types", "ui"],

    "core":{
        "animation":500,
        "strings":{
            "loading":"Yükleniyor"
        }
    },

    "types":{
        "types":{
            "max_children" : -2,
            "max_depth" : -2,

            "folder" : {
                "valid_children" : [ "default", "dizin", "dosya" ],
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/folder.png"
                }
            },
            "file" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            },
            "default" : {
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            }
        }
    },

    "json_data" : {
        "ajax" : {
            "url" : "/dokumantasyon/dokumanAgaciOgesiAl/"
        }
    }
});

my sample JSON is :

[{"data": {"icon": "folder", "title": "Sıkça Sorulan Sorular"}, "children": [{"data": {"icon": "file", "attr": {"onclick": "dokuman_getir(4)"}, "title": "Program makbuz basmadı"}}]}]

icon is set within data dicrionary, as it is shown in sjtree documentation. But it is useless. I get no error, everything is fine except the icond of the tree.

My second question is, how can i configure jstree, so when i click a parent node ( a folder) it will expand as if expand arrow had clicked.

Thanks for your help.

Answer 1

Your response data needs to look like this:

[{"attr":{"id":"node_2","rel":"folder"},"data":"root","state":"closed"}]

This is an array with one node, but you could return multiple in the array to create multiple nodes.

The "state":"closed" is tells the jsTree to request the child nodes from your server when clicked/expanded.

The "rel" : "folder" tells the jsTree to use the folder type defined in the "types" node you had above. Then the icon specified for the "folder" type will be used.

Answer 2

In order to create a click to expand behaviour, you can use the types plugin to override the default click behaviour:

"types":{
    "types":{
        "max_children" : -2,
        "max_depth" : -2,
        "default" : {
            "valid_children" : [ "default"],            
            "select_node" : function (e) {
                this.toggle_node(e);
                return false;
            }
        },
        ...