Bootstrap treeview Select children on root click

Question

i am using Bootstrap Treeview (bootstrap-treeview.js v1.0.2); how can i activate selection effect on all chidren of root node on click of root?

This snippet doesn't work as expected

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            children[i].states.expanded = true;
            children[i].states.selected = true;
        }
});

and this works only on the first child

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            nodeId=children[i]['nodeId'];
            console.log(nodeId);
            $('.node-tree[data-nodeid="'+nodeId+'"]').click();
        }
});

You forgot to `var` your `children` and `nodeId` variables. This is a bug. Never forget to use `var`. — Tomalak, Mar 03 '15 at 14:19
Sure, that's a mistake, but 'children[i].states.selected = true' related on click event doesn't make any change on children nodes... seems not work as expected. — zuk, Mar 04 '15 at 15:46
I don't know very much about bootstrap treeview. A quick search turned up this: http://stackoverflow.com/a/21878141/18771 - maybe it helps. — Tomalak, Mar 04 '15 at 16:34

score 7 · Answer 1 · answered Aug 12 '15 at 08:52

Refer to my code below,
note that you need make sure your data option "multiSelect" is true.

var tree = $('#caseview').treeview({
    levels: 2,
    showTags: true,
    showCheckbox: true,
    multiSelect: true,
    data: caseData
});

caseview.on('nodeSelected', function(e, node){
    if (typeof node['nodes'] != "undefined") {
        var children = node['nodes'];
        for (var i=0; i<children.length; i++) {
            caseview.treeview('selectNode', [children[i].nodeId, { silent: true } ]);
        }
    }
});

How do I select `children of children` or `children of children of children`, ect' ? — Imnotapotato, Aug 06 '18 at 09:22

score 3 · Answer 2 · edited May 23 '17 at 12:10

I adapted the function "_getChildren" from feiyuw:

function _getChildren(node) {
    if (node.nodes === undefined) return [];
    var childrenNodes = node.nodes;
    node.nodes.forEach(function(n) {
        childrenNodes = childrenNodes.concat(_getChildren(n));
    });
    return childrenNodes;
}

var tree = $('#tree').treeview({
    level: 3,
    expandIcon: "fa fa-plus-square",
    collapseIcon: "fa fa-minus-square",
    emptyIcon: "fa fa-truck",
    showTags: true,
    showCheckbox: true,
    selectable: false,
    highlightSelected: false,
    data: getTree()
}).on('nodeChecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('checkNode', [ this.nodeId, { silent: true } ]);;
    });
}).on('nodeUnchecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('uncheckNode', [ this.nodeId, { silent: true } ]);;
    });
});

feiyuw · Answer 3 · 2016-01-12T08:23:06.233

I also meet this problem, below is my solution (NOTE: I use lodash here):

function _getChildren(node) {
  if (node.nodes === undefined) return [];
  var childrenNodes = node.nodes;
  node.nodes.forEach(function(n) {
    childrenNodes = childrenNodes.concat(_getChildren(n));
  });

  return childrenNodes;
}

$('#tree').treeview({
  data: data,
  levels: 1,
  showCheckbox: true,
  showBorder: false,
  showTags: false,
  selectable: false,
  multiSelect: true,
  highlightSelected: false,
  onNodeChecked: function(event, node) {
    var parentNodes = _getParents([node], $(this));
    var childrenNodes = _.map(_getChildren(node), 'nodeId');
    var allNodes = parentNodes.concat(childrenNodes);
    $(this).treeview('checkNode', [allNodes, {silent: true}]);
  },
});

Where is the "_getParents" function? – Aline Matos May 07 '17 at 04:31 — Aline Matos, May 07 '17 at 04:31
oh, sorry, forgot to paste it. – feiyuw May 07 '17 at 08:50 — feiyuw, May 07 '17 at 08:50

score 0 · Answer 4 · answered Jun 23 '18 at 14:51

just make select = true

var tree = $('#caseview').treeview({
    selectable: true, // enable here, if exist, otherwise append it line
    data: caseData
})
.on('nodeSelected', function(e, node){
    if (node['text'].includes(".doc") { // text as name of node
        doit()
    }
})

".doc" - is example of file extension to select files instead folders

doit() - is your code to continue

Trần Quang Hồng · Answer 5 · 2022-12-12T07:58:25.747

Hope that helps you

$('#tree').on('click', (event) => {
  handleEventClick(event.target, false);
});

function handleEventClick(target) {
  if ($(target) && $(target).attr('data-nodeid')) {
    const nodeIdSelected = +$(target).attr('data-nodeid');
    const currentNode = $('#tree').treeview('getNode', nodeIdSelected);
    if (currentNode) {
      const isSelected = currentNode.state.selected;
      const listNodeChild = getNodeChildByNodeInfo(currentNode);
      if (listNodeChild.length) {
        listNodeChild.forEach(nodeChild => {
          $('#tree').treeview('expanded', nodeChild.nodeId);
          $('#tree').treeview(isSelected ? 'selectNode' : 'unselectNode', nodeChild.nodeId);
        });
      }
      toggleNodeSelectedParent(currentNode);
    }
  }
}

function getNodeChildByNodeInfo(currentNode) {
  let listNodeChild = [];
  if (currentNode.nodes && currentNode.nodes.length) {
    currentNode.nodes.forEach(item => {
      listNodeChild.push(item);
      if (item.nodes && item.nodes.length) {
        listNodeChild = [...listNodeChild, ...getNodeChildByNodeInfo(item)];
      }
    });
  }
  return listNodeChild;
}

function toggleNodeSelectedParent(nodeId) {
  const nodeParent = $('#tree').treeview('getParent', nodeId);
  if (nodeParent && nodeParent.nodes) {
    $('#tree').treeview('expanded', nodeParent.nodeId);
    $('#tree').treeview(nodeParent.nodes.length === nodeParent.nodes.filter(itemChild => itemChild.state.selected).length
      ? 'selectNode' : 'unselectNode', nodeParent.nodeId);
    toggleNodeSelectedParent(nodeParent.nodeId);
  }
  return;
}

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you edit your answer to include an explanation of what you're doing** and why you believe it is the best approach? — Skully, Dec 15 '22 at 13:11

score -1 · Answer 6 · answered Oct 12 '20 at 13:17

I tried the previous answers and it has bugs. I fixed it according the below code

                var treeCheck = $('.treeCheck').treeview({
                    data: res,
                    nodeIcon: "fa fa-desktop",
                    expandIcon: 'fa fa-angle-left',
                    collapseIcon: 'fa fa-angle-down',
                    checkedIcon: 'fa fa-check-circle',
                    uncheckedIcon: 'fa fa-circle-o',
                    showBorder: false,
                    showCheckbox: true
                }).on('nodeChecked', function (event, node){
                    
                    var childrenNodes = _getChildren(node);
                    for (i = 0; i < childrenNodes.length; i++) {
                         $('.treeCheck').treeview('checkNode', [ childrenNodes[i], { silent: true } ]);
                    } 
                    
                }).on('nodeUnchecked', function (event, node){
                    var childrenNodes = _getChildren(node);

                    for (i = 0; i < childrenNodes.length; i++) {
                        $('.treeCheck').treeview('uncheckNode', [ childrenNodes[i], { silent: false } ]);
                    }
                });

function _getChildren(node) { if (node.nodes === undefined) return []; var childrenNodes = node.nodes; node.nodes.forEach(function(n) { childrenNodes = childrenNodes.concat(_getChildren(n)); }); return childrenNodes; } — m.mustafa, Oct 12 '20 at 13:18

Bootstrap treeview Select children on root click

6 Answers6