CODEWITHSUNDEEP
orgchartgetorgchart
Mickael Duvallet
Mickael Duvallet

Reputation: 21

Add new nodes dynamycally on GetOrgChart

Is there a method to add new nodes with ajax ? I would like that when i click on a node, a ajax request is send to take informations in database and create childrens for this node. I tried with insertNode and inserNodeEvent but only one node is created even if database send many.

Thanks

Upvotes: 1

Views: 1186

Answers (2)

Mickael Duvallet
Mickael Duvallet

Reputation: 21

Thanks for your answer, i have an another problem. I can't add new data to the source, and the ajax request only send the name

var source = [ { id: 1, parentId: null, Name: "Amber McKenzie 1"}, 
{ id: 2, parentId: 1, Name: "Ava Field 2"},
{ id: 3, parentId: 1, Name: "New node Id 3"},
{ id: 4, parentId: 1, Name: "Evie Johnson 4"},
{ id: 5, parentId: 2, Name: "Amber McKenzie 5"},
{ id: 6, parentId: 3, Name: "Ava Field 6"}, 
{ id: 7, parentId: 4, Name: "New node Id 7"}, 
{ id: 8, parentId: 5, Name: "Evie Johnson 8"}]; 

function clickHandler(sender, args){ 
var id = args.node.id;
$.ajax({
  type: "POST",
  url: "get-data.php",
  data: {source : source, id : id},
  success: function(data){
  source.push(data);
   orgchart.config.dataSource = source;

  orgchart.load(); 
  }
});
};

var orgchart = new getOrgChart(document.getElementById("people"),{          
  enableSearch: false,
  clickNodeEvent: clickHandler, 
  expandToLevel: 7,
  linkType: "B",
  dataSource: source
});

Upvotes: 1

BALKANGraph
BALKANGraph

Reputation: 2051

Please run the code snippet bellow. The next version will support batch insertNode method 

var source = [
  { id: 1, parentId: null, Name: "Amber McKenzie"},
  { id: 2, parentId: 1, Name: "Ava Field"},
  { id: 3, parentId: 1, Name: "Evie Johnson"}];

var orgchart = new getOrgChart(document.getElementById("people"),{			
  enableSearch: false,
  dataSource: source
});


document.getElementById("insertNodes").addEventListener("click", function(){  
  source = [
  { id: 1, parentId: null, Name: "Amber McKenzie"},
  { id: 2, parentId: 1, Name: "Ava Field"},
  { id: 4, parentId: 1, Name: "New node Id 4"},
  { id: 3, parentId: 1, Name: "Evie Johnson"},
  { id: 5, parentId: 3, Name: "New node Id 5"}];
  
  orgchart.config.dataSource = source;
  
  orgchart.load();
});
<link rel="stylesheet" type="text/css" href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css">
<script type="text/javascript" src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<input id="insertNodes" type="button" value="insert nodes" />

<div id="people"></div>

Upvotes: 1

Related Questions