How do I collapse an orgChart with all nodes when first displayed and then show first level of its children by select event?

Question

I create an orgChart by pulling data from json data. at first ı want only show first level of orgChart. ı mean top of chart. and then when ı click the node ı want to list children of clicked node. ı mean showing first degree relative children of clicked nodes.

here is my select event code when ı clicked

    function selectHandler(e) {
      //console.log(selectedItem);   
      /////////////////////////////////////
      var selection = chart.getSelection();
    var row;
    if (selection.length == 0) {
        row = previous;
    }
    else {
        row = selection[0].row;
        previous = row;
    }
    var collapsed = chart.getCollapsedNodes();
    var collapse = (collapsed.indexOf(row) -== 1);
    chart.collapse(row, collapse);
    chart.setSelection([{row: row, column: null}]);}

score 0 · Answer 1 · answered Mar 05 '21 at 17:11

you can use the collapse method during the ready event to collapse the nodes.
make sure to use addOneTimeListener when assigning the ready event.
otherwise, the nodes will be collapsed on every select.
this is because the ready event is fired when a node is collapsed / un-collapsed.

see following working snippet...

google.charts.load('current', {
  packages: ['orgchart']
}).then(function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');
  data.addRows([
    [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
     '', 'The President'],
    [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
     'Mike', 'VP'],
    ['Alice', 'Mike', ''],
    ['Bob', 'Jim', 'Bob Sponge'],
    ['Carol', 'Bob', '']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart'));

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    // loop rows in reverse order
    for (var i = data.getNumberOfRows() - 1; i >= 0; i--) {
      // determine if node has children
      if (chart.getChildrenIndexes(i).length > 0) {
        // collapse row
        chart.collapse(i, true);
      }
    }
  });

  google.visualization.events.addListener(chart, 'select', function () {
    // get selection
    var selection = chart.getSelection();

    // determine if selection made
    if (selection.length > 0) {
      // collapse / un-collapse row
      chart.collapse(selection[0].row, (chart.getCollapsedNodes().indexOf(selection[0].row) === -1));
    }
  });

  chart.draw(data, {allowHtml: true, allowCollapse: true});
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

note: there is issue with using the select event. the event is fired when a node is un-selected, and there is no way of knowing which node was un-selected.
as such, if the same node is clicked twice, nothing will happen on the second clicked.

it might make sense to use the default action,
of allowing the user to double-click the nodes to collapse / un-collapse.
and remove the select event all together.

How do I collapse an orgChart with all nodes when first displayed and then show first level of its children by select event?

1 Answers1