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
jsfiddle has an echo service for testing ajax, documentation is here. I'd set up the demo myself but I'm sure you'll get more help in general with one. — Snuffleupagus
I believe that is only for testing delayed responses to $.ajax / $.get calls, etc. I need dynatree to do the call - see update. — Kev
..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

Kev Kev · Accepted Answer · 2013-06-19T20:15:59

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".

Dynatree ignores select property when using ajax

2 Answers