2

My fancytree looks like the following. It is running but i want to add some features, first page load all checkbox is selected and all tree opened. How can i do it?

$("#definition-tree").fancytree({
                checkbox: true,
                selectMode: 3,
                icons: false,
                source: convertData(@Html.Raw(ViewBag.ResumeSettingDefinitions)),
                select: function (event, data) {
                    var selNodes = data.tree.getSelectedNodes();
                    var selKeys = $.map(selNodes,
                        function (node) {
                            return parseInt(node.key);
                        });
                    selectedResumeSettingDefinitionsId = selKeys;
                },
                click: function (event, data) {
                    if ($.ui.fancytree.getEventTargetType(event.originalEvent) == "title") {
                        data.node.toggleExpanded();
                        data.node.render();
                    }
                },
                keydown: function (event, data) {
                    if (event.which === 32) {
                        data.node.toggleSelected();
                        return false;
                    }
                }
            });
Erman
  • 192
  • 1
  • 3
  • 14
  • Please add a working code snippet or a link to [codepen.io](https://codepen.io/pen/) or [jsfiddle.net](https://jsfiddle.net) – myfunkyside Mar 29 '18 at 16:40
  • For example http://jsfiddle.net/KcxRd/1513/. This is other fancytree. I want the tree open and all node and key checked. – Erman Mar 30 '18 at 12:41

1 Answers1

3

I've found two ways to expand all tree nodes. To select all nodes I've found only one.
In my answer I'll be using the code from your jsfiddle-link.

OPTION 1

Use expanded:true on a per-node-basis during initialization, meaning you'd have to add that option to every node that is expandable:

$(function(){
  $("#tree").fancytree({
    checkbox: true,
    source: [
      {title:"Node 1"},
      {title:"Node 2"},
      {title:"Folder 3", folder:true, expanded:true, children: [
        {title:"Node 3.1"},
        {title:"Node 3.2"}
      ]},
      {title:"Folder 2", folder:true}
    ]
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>

<div id="tree"></div>

In theory this would have my preference, because you wouldn't need an extra function to accomplish your goal. The downside of this is of course that you would have to add the option for every expandable node, and since I haven't found an option to select all nodes during initialization, you would still need an extra function for that anyway.

So with that in mind, my practical preference goes to option 2.

OPTION 2

Use an extra function after initialization, to both expand and select all nodes in the tree:

$("#tree").fancytree("getTree").visit(function(node) {
  node.setExpanded(true);
  node.setSelected(true);
});


$(function(){
  $("#tree").fancytree({
    checkbox: true,
    source: [
      {title:"Node 1"},
      {title:"Node 2"},
      {title:"Folder 3", folder:true, children: [
        {title:"Node 3.1"},
        {title:"Node 3.2"}
      ]},
      {title:"Folder 2", folder:true}
    ]
  });
  $("#tree").fancytree("getTree").visit(function(node) {
    node.setExpanded(true);
    node.setSelected(true);
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>

<div id="tree"></div>
jsfiddle: http://jsfiddle.net/sturLzes/

Sources:
https://github.com/mar10/fancytree
http://wwwendt.de/tech/fancytree/doc/jsdoc/
http://wwwendt.de/tech/fancytree/demo/sample-api.html
http://wwwendt.de/tech/fancytree/demo/sample-select.html

myfunkyside
  • 3,890
  • 1
  • 17
  • 32
  • 2
    I would recommend to put the ‘visit()’ into the tree’s ‘init’ event, to make sure it is executed *after* the source data is loaded. Not relevant in the example above, but would bite you if Ajax was used to load nodes. – mar10 Apr 03 '18 at 06:10
  • 2
    As to option 1: it would be possible to set the ‘expanded’ flag in the ‘postprocess’ event, so you don’t have to send it. – mar10 Apr 03 '18 at 06:13
  • 1
    @Erman if you want to [personally address someone](https://meta.stackexchange.com/questions/43019/how-do-comment-replies-work), it's best to use the at-sign before the person's name like I just did with your name, that way you are sure the person gets your message. You can just delete your comment and ask again with his name added. – myfunkyside Apr 06 '18 at 08:46
  • @myfunkyside thaks for advice :) – Erman Apr 06 '18 at 08:55
  • @mar10 could you also elaborate on your second comment? I would like to update my answer, but I couldn't get either of your comments implemented – myfunkyside Apr 07 '18 at 16:09
  • 1
    The fiddle looks good, but has the drawback that you see the animation. You can pass `{noAnimation: true}` as 2nd parameter to setExpanded if you like – mar10 Apr 07 '18 at 16:18
  • The postProcess event can be used to modify or replace the original Ajax response. So you could use it to add the expanded or selected flags there – mar10 Apr 07 '18 at 16:21