Fancytree with "selectMode=3" ignores "selected=true" on nodes with children

[SuperMario77]

This issue is currently deferred

Due to low priority and current lack of resources, this issue was tentatively put aside.
See also info about deferred issues

Hello,

I use the fancytree with selectMode=3. I want to show a tree with pre-selected nodes (checkboxes) but fancytree ignores all "selected:true" definitions on nodes which have children.

My setup:
HTML:
<div id="tree"></div>

Javascript:

$('#tree').fancytree({
    source: [
        { id: 1, key: 'A', title: 'A', children: [
            { id: 2, key: 'B', title: 'B', selected: true, children: [
                { id: 3, key: 'C', title: 'C' }
            ]}
        ]}
    ],
    icon: false,
    checkbox: true,
    selectMode: 3
});

Expected and actual behavior

If "B" has definition "selected:true" then also "A" and "C" should be pre-selected. But actual no checkbox is checked => BUG

If I read out the FancytreeNode of the "B" then the property "selected" is set to "false"

var tree = $('#tree').fancytree('getTree');
console.log(tree.getNodeByKey('B').selected);

Additional info

If I move the "selected:true" definition to a leaf of the tree, e.g. to "C" node, then everything is fine and all 3 nodes are checked.
If I set the selectMode to 1 or 2, the "B" node is preselected without any problems. So it is a "selectMode=3" problem.

Steps to reproduce the problem

I have created a jsfiddle for this issue:
https://jsfiddle.net/x36krqL6/1/

Environment

• Browser type and version: Chrome 49
• jQuery and jQuery UI versions: jQuery 1.12.2 and jQuery UI 1.10.4
• Fancytree version: 2.16.1

UPDATE 1

It seems the function "fixSelection3FromEndNodes()" is the root cause. Before this function call the "selected" of node "B" is true and after this call the "selected" of "B" is false.
At the end of function "treeLoad":

if( ctx.options.selectMode === 3 ){
    tree.rootNode.fixSelection3FromEndNodes();
}

There is also a comment for this fix-method, which says "Only end-nodes are considered to update the descendants branch and parents." Why?

In my case, I want to show a organization tree, where an administrator can define responsible people for each node. But I don't want to set the people on the leafs (the departments), I want to set some people in a higher node, e.g. district, country, ... And always when I reload these permissions for one people from database and want to show the tree with the pre-selected nodes, all selects are gone or will be not displayed as "selected".

UPDATE 2

I found a workaround for my problem, but perhaps you could find a better solution (IF you also think that this is a bug)

I used an own property "preselected" for each node, which will be then written to the data-object of the node and will not touched by the fixSelection3FromEndNodes() function. Then I wait for the "init" tree-event, which means the tree is loaded and rendered. Then I visit each node and read out the property "preselected" to call setSelected(true).

$('#tree').fancytree({
    source: [
        { id: 1, key: 'A', title: 'A', children: [
            { id: 2, key: 'B', title: 'B', selected: true, preselected: true, children: [
                { id: 3, key: 'C', title: 'C' }
            ]}
        ]}
    ],
    icon: false,
    checkbox: true,
    selectMode: 3,
    init: function (event, data) {
        data.tree.getRootNode().visit(function (node) {
            if (node.data.preselected) node.setSelected(true);
        });
    }
});

I have updated the jsfiddle with the workaround:
https://jsfiddle.net/x36krqL6/2/

[mar10]

Thanks for contributing. I will look into it, if I find some time.
You may also want too look at, or comment on https://github.com/mar10/fancytree/wiki/SpecSelect

[SuperMario77]

Thanks for looking into this issue. You wrote in the wiki that you don't want to fix the selection coming from server. But actually it is not difficult for you to fix the selection, because you already have all functions. In my very small example above, I think I have no inconsistent selection definition from server, because 'selected' is only set to 'true' for node 'B'. IF I also set the node 'A' and node 'C' to 'selected: false' then you are right, this will be a inconsistent selection.

In my use case it is very important to not save all the currently selected leaves in my database, but the node which is the parent of these leaves. In that way I can add leaves afterwards to this parent and these leaves are automatically in the selection od the parent.

You could walk the tree down and call 'fixSelection3AfterClick' for each node which has defined 'selected=true'. After complete walking you could call 'fixSelection3FromEndNodes' to fix tree from leaves to root.

[kinow]

Had similar problem and @SuperMario77 just saved me some hours of debugging and writing code.

Thanks!!!

[thamaraiselvam]

Thanks @SuperMario77 it works. 💯

[mar10]

Thanks for the feedback. Would someone volunteer to append the solution code snippet as new [Howto] ... in this wiki entry?

[mar10]

Due to low priority and current lack of resources, this issue was tentatively put aside.
See also info about deferred issues.

Hierarchical selection needs more clarification, before we can pick up and hopefully implement a more flexible solution:
see also (and comment on) https://github.com/mar10/fancytree/wiki/SpecSelect

Until that, it is possible to implement specific use cases using the available API and methods (e.g. as described above.)

[bogdanez]

@SuperMario77 Thank you for your solution, but it doesn't seem to work everywhere. In my Fiddle the note 4.2 is set to be selected using your method, but it doesn't. Can you please take a look?
https://jsfiddle.net/x36krqL6/117/

UPDATE: It wasn't working with JSON notation, but when I changed it to data- notation, it worked. Example: https://jsfiddle.net/x36krqL6/119/

I hope this helps someone :)