Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Expanding/Collapsing all tree nodes

To expand all tree nodes:

 var treeView = tree.treeBoxObject.view;
 for (var i = 0; i < treeView.rowCount; i++) {
   if (treeView.isContainer(i) && !treeView.isContainerOpen(i))
     treeView.toggleOpenState(i);
 }

To collapse all tree nodes just change the condition:

 var treeView = tree.treeBoxObject.view;
 for (var i = 0; i < treeView.rowCount; i++) {
   if (treeView.isContainer(i) && treeView.isContainerOpen(i))
     treeView.toggleOpenState(i);
 }

Getting the text from the selected row

Assuming the given <tree>:

 <tree id="my-tree" seltype="single" onselect="onTreeSelected()">

Use the following JavaScript:

 function onTreeSelected(){
   var tree = document.getElementById("my-tree");
   var cellIndex = 0;
   var cellText = tree.view.getCellText(tree.currentIndex, tree.columns.getColumnAt(cellIndex));
   alert(cellText);
 }

Getting the tree item from the focused row

Assuming <tree id="my-tree">, you can use the following to get the tree item:

var view = document.getElementById("my-tree").view;
var sel = view.selection.currentIndex; //returns -1 if the tree is not focused
var treeItem = view.getItemAtIndex(sel);

Note that the current index may be unselected (for example, a multi-select tree).

Getting the cell from a mouse click

Your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar. But this will not work. You can't add event handlers to <treecell>. Instead, you can add the event handler to the <tree> element. You can then use the event and some utility methods to find the <treecell>. For example, assuming the given <tree>:

 <tree id="my-tree" onclick="onTreeClicked(event)">

Use the following JavaScript:

function onTreeClicked(event){
  var tree = document.getElementById("my-tree");
  var tbo = tree.treeBoxObject;

  // get the row, col and child element at the point
  var row = { }, col = { }, child = { };
  tbo.getCellAt(event.clientX, event.clientY, row, col, child);

  var cellText = tree.view.getCellText(row.value, col.value);
  alert(cellText);
}

Getting the selected indices of a multiselect tree

  var start = {}, end = {}, numRanges = tree.view.selection.getRangeCount(), selectedIndices = [];

  for (var t = 0; t < numRanges; t++){
    tree.view.selection.getRangeAt(t, start, end);
    for (var v = start.value; v <= end.value; v++)
      selectedIndices.push(v);
  }

Other resources

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, ethertank, Mh512, fscholz, Mook, ericjung, MarkFinkle, Mrolappe, Chbok
 Last updated by: wbamberg,