How to implement expandNode within onNodeSelected from a Bootstrap treeview?

Question

The nodes from a Bootstrap tree view can only be collapsed/expanded with the + & - prefixes. I understand the click event is saved for less mundaine things. We do use the click event to send information about the leaves to anther part of the page.

But my client wants exactly this: collapse & expand when clicking on the li-element. Which is, in fact, much more user-friendly and intuitive.

I've found the methods "expandNode" and "collapseNode" on GitHub.

$('#tree').treeview('expandNode', [nodeId, {
  levels: 2,
  silent: true
}]);
$('#tree').treeview('collapseNode', [nodeId, {
  silent: true,
  ignoreChildren: false
}]);

Now I want to call them directly from the event onNodeSelected, as following:

$('#treeview').treeview({
  data: data,
  multiSelect: true,
  highlightSelected: false,
  onNodeSelected: function(event, node) {
    if (node.nodes == undefined) {
      // sends node info to another element
    } else if (node.state.expanded) {
      // TODO collapse children 
      collapseNode(node.nodeId);
    } else {
      // TODO expand children 
      expandNode(node.nodeId);
    }
  }
});

function collapseNode(nodeId) {
  $('#tree').treeview('collapseNode', [nodeId]);
  alert("collapse " + nodeId);
}

function expandNode(nodeId) {
  $('#tree').treeview('expandNode', [nodeId]);
  alert("expand " + nodeId);
}

The alerts are trigged and show the correct node Id. But the node is not expanded (or collapsed). What do I miss?

score 1 · Answer 1 · answered Aug 25 '17 at 08:53

You're selecting the wrong tree view in the functions. Try updating them to the following:

function collapseNode(nodeId) {
  $('#treeview').treeview('collapseNode', [nodeId]);
  alert("collapse " + nodeId);
}

function expandNode(nodeId) {
  $('#treeview').treeview('expandNode', [nodeId]);
  alert("expand " + nodeId);
}

How to implement expandNode within onNodeSelected from a Bootstrap treeview?

1 Answers1