Expand/Collapse ALL Nodes

[dkulas]

Does OrgChart offer a specific functionality where you can expand/collapse every single node based on a user clicking an html button? What I've been trying to figure out is how to change the 'depth' from 1 to 1000 when a user clicks an 'expand' button that I've created

[dabeng]

Hi @dkulas , you mean you wanna hide/show all nodes based on the root node?

[dabeng]

or any node which has the descendent nodes ?

[dkulas]

hey @dabeng I was able to figure it out with a little javascript hackery. thanks for responding, much appreciated!

[udayms]

@dkulas Can you pls share how you managed to get it done..?

[dkulas]

@udayms Below is the code I used to achieve the desired result:

`// ********************
// Expand all nodes
// in company org chart
// ********************

    	$("button#expandNodesButton.btn.btn-default").on("click", function() {

    		var options = {
    		'data': datascource,
	      'depth': 999,
	      'nodeContent': 'title',
	      'pan': true,
	      'exportButton': true,
	      'exportFilename': 'MyOrgChart',
	      'parentNodeSymbol': 'fa-user'
    		}

    		$("#my-org-chart").empty();
    		$("button#expandNodesButton.btn.btn-default").toggle();
    		$("button#collapseNodesButton.btn.btn-default").css("display", "block");

    		$("#my-org-chart").orgchart(options);

    		$(".orgchart .node:first-child").css("transform", "none");

    	});

    	// ********************
    	// Collapse all nodes
    	// in company org chart
    	// ********************

    	$("button#collapseNodesButton.btn.btn-default").on("click", function() {

    		var options = {
    		'data': datascource,
	      'depth': 1,
	      'nodeContent': 'title',
	      'pan': true,
	      'exportButton': true,
	      'exportFilename': 'MyOrgChart',
	      'parentNodeSymbol': 'fa-user'
    		}

    		$("#my-org-chart").empty();
    		$("button#collapseNodesButton.btn.btn-default").css("display", "none");
    		$("button#expandNodesButton.btn.btn-default").css("display", "block");

    		$("#my-org-chart").orgchart(options);

    	});`

[dkulas]

@udayms Essentially, I was just updating the options depth key to be either 999 or 1

[mahbubcubd]

Is there any way to drag a Nodes from outside of the #chart-container and drop it into the #chart-container?
Its like just adding Nodes by using drag and drop.