Dynatree ignores select property when using ajax

Question

I am using the dynatree plugin to display a checkbox tree, using multi-select mode (mode 3).

When the tree is initialized using ajax (no lazy loading), it seems to forget that some nodes are loaded initially selected. When I select one of these nodes, the value of the flag passed into the onSelect handler is true, i.e: it thinks I want to select the node.

When I click the checkbox again it deselects. It seems that in the background the selection isn't registered until I physically click the checkbox. I want to load the tree with this node already selected.

The json that I am using to load the tree looks fine to me; the select property is true for the node in question, the root node. Here is a snippet of the JSON:

{
"expand":true,
"title":"All",
"isFolder":false,
"key":"0",
"isLazy":false,
"addClass":null,
"select":true,
"unselectable":false,
"children": [... omitted for clarity]
}

UPDATE

I am loading the tree this way:

$("#locationsTree").dynatree({
    checkbox: true,
    selectMode: 3,
    initAjax: {
        type: "POST",
        url: dynaTreeInitUrl
    },
    classNames:
    {
        nodeIcon: ""
    }        
});

where dynaTreeInitUrl is the url that returns the json.

If I hardcode the JSON like so:

$("#locationsTree").dynatree({
    checkbox: true,
    selectMode: 3,
    children: {
        "expand":true,
        "title":"All",
        "isFolder":false,
        "key":"0",
        "isLazy":false,
        "addClass":null,
        "select":true,
        "unselectable":false,
        "children": [{
            "expand": true,
            "title": "Child",
            "isFolder": false,
            "key": "1",
            "isLazy": false,
            "addClass": null,
            "select": true,
            "unselectable": true,
            "children": []
        }]
    },
    classNames:
    {
        nodeIcon: ""
    }        
});

it works. :/

UPDATE:

I discovered why this is happening:

It is a bug in dynatree - or maybe intended behaviour where it is trying to be too clever.

If the child node has unselectable = true, the parent will be unselected when the child is loaded, even if the parent has select = true. This makes it impossible create a tree where the selection is hierarchical - i.e.: to have it so that if parent is selected, all children are automatically selected, and cannot be unselected. I suppose this could be added to dynatree as another "mode".

I'll give it a try, but, the problem only occurs when I load the tree using ajax - if I use the children property to hardcode the json data it works perfectly. I don't know how to replicate the ajax call in a jsFiddle or similar. — Kev, Jan 04 '13 at 17:17
jsfiddle has an echo service for testing ajax, documentation is [here](http://doc.jsfiddle.net/use/echo.html). I'd set up the demo myself but I'm sure you'll get more help in general with one. — Snuffleupagus, Jan 04 '13 at 17:19
I believe that is only for testing delayed responses to $.ajax / $.get calls, etc. I need dynatree to do the call - see update. — Kev, Jan 04 '13 at 17:39
..cont... I attempted calling the echo uri then dropping the json response into the children property, but I can't replicate the condition that causes the error - ie: dynatree doing the call itself. — Kev, Jan 04 '13 at 17:46
Is there a reason you are using `POST` instead of `GET` in your Ajax request? Can you confirm that the ajax request is returning the JSON, using Firebug or Chrome Developer Tools? If you set the option `debugLevel: 2` in dynatree, is anything useful displayed in the JavaScript console? — mccannf, Jan 04 '13 at 18:21
I am using POST because GET gives this error: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet. When I set JsonRequestBehavior to AllowGet and then tell Dynatree to use GET, the original problem persists. I will try your other suggestions — Kev, Jan 05 '13 at 22:04
I meant that if you have the Network tab open in Firebug or Chrome Developer tools when dynatree runs, you can examine the JSON returned by the server and confirm that `"select": true` is set in the JSON for the nodes. Is it set? — mccannf, Jan 06 '13 at 00:36
@Kryptonite: According to your last update it seems you have found the cause and assuming a work-around. If that is the case, please post your findings and solution as an answer an mark as accepted so future users with similar problems can easily see the solution which worked in this case for this issue. — Nope, Jan 09 '13 at 22:28
Could you load the JSON using AJAX, then process it before handing it do dynatree? Clunky, but if dynatree has a bug... — boisvert, Jan 11 '13 at 08:24
@boisvert I have tried this but to no avail - I will post a follow up answer with my workaround later today. — Kev, Jan 11 '13 at 10:33
To help out, please post your answer as an answer instead of as an update to your question. This helps future readers identify solved problems. Thank you. — Jacob, Jun 19 '13 at 14:34

score 1 · Accepted Answer · answered Jun 19 '13 at 20:15

I discovered why this is happening:

It is a bug in dynatree - or maybe intended behaviour where it is trying to be too clever.

If the child node has unselectable = true, the parent will be unselected when the child is loaded, even if the parent has select = true. This makes it impossible create a tree where the selection is hierarchical - i.e.: to have it so that if parent is selected, all children are automatically selected, and cannot be unselected. I suppose this could be added to dynatree as another "mode".

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

you can use this code:

onPostInit: function() {
$.map(this.getSelectedNodes(), function(node){
    node.makeVisible();
});

}

Dynatree Expand Parents of Selected Nodes

edited May 23 '17 at 12:25

Community

1
1

answered Apr 15 '17 at 09:56

leyla azari

913
11
20

Dynatree ignores select property when using ajax

2 Answers2