title: How to load children on demand with new jstree v3.0.0
body: <p>I am looking for like a little bit of help populating children nodes on-demand (on expand) in a jstree. I can populate the parent nodes but having no luck populating the child nodes. </p>
  
  <h2>Scenario:</h2>
  
  <p>I am using jstree for populating nodes in a tree. My data source is json. However, i get parent nodes from a different service and child nodes from a different service.</p>
  
  <p><strong>I am using the new jstree version 3.0.0</strong> found here:
  <a href="https://github.com/vakata/jstree/zipball/3.0.0-beta8" rel="nofollow noreferrer">https://github.com/vakata/jstree/zipball/3.0.0-beta8</a></p>
  
  <h2>What challenge I am facing?:</h2>
  
  <p>I want to load children and sub-children on demand when a user expands a parent node. There could hundreds of companies, thousands of sites and millions of agents and thus it is not possible to load all data at once... (i.e. combining results Companies, sites and agents together works, but is not desirable due to performance issues).</p>
  
  <p>The code samples found here: <a href="http://www.jstree.com/docs/json/" rel="nofollow noreferrer">http://www.jstree.com/docs/json/</a> are quite implicit and I could only populate parent nodes using the sample provided. Maybe someone who has faced similar solution can help me find a suitable solution.</p>
  
  <h2>Required:</h2>
  
  <p>Additionally, I need to load 3 layers of children, Think of a scenario:</p>
  
  <h2>Sample Scenario:</h2>
  
  <p>Company1
  -Site1
  --Agent1
  --Agent2
  -Site2
  --Agent3
  --Agent4</p>
  
  <p>Company2
  -Site3
  --Agent5
  -Site4
  --Agent6
  --Agent7</p>
  
  <h2>Code:</h2>
  
  <p>Here is my code (which only works for parent nodes):</p>
  
  <pre><code>$('#agentsTreev2').jstree({
              "plugins": ["contextmenu", "dnd", "search", "sort", "state", "types", "unique", "wholerow"],
              'core': {
                  'data': {
  
                      'url': function (node) {
                          console.log(node.id);
                          return node.id === '#' ?
                                          'http://localhost:21282/data.svc/Companies?$format=application/json;odata=nometadata;'
                              :
                                          'http://localhost:21282/data.svc/Sites?$select=Site_Id,Name,Company_Id&amp;$filter=Company_Id eq 24&amp;$format=application/json;odata=nometadata;';
  </code></pre>
  
  <p>//^^^^ above is a sample url for children/Sites, actual url should use parent node Company Id</p>
  
  <pre><code>                    },
                      'crossDomain': 'true',
                      'type': 'GET',
                      'dataType': 'json',
                      'contentType': 'application/json',
                      'cache': false,
                      'success': function (response) {
                          return response;
                      },
                      'dataFilter': function (data, type) {
  
                          if (type == "json") {
                              //Replace Name to title so that dynatree can render Title text
                              data = data.replace(/Name/g, "title");
                              //Convert to Json object to allo addition of custom Object
                              var jsonObj = JSON.parse(data);
                              //Hack for WCF Service like in all the functions above.
                              jsonObj = jsonObj.value;
  
                              for (var i = 0; i &lt; jsonObj.length; i++) {
  
                                  //jstree specific values
                                  jsonObj[i]["id"] = jsonObj[i]["Company_Id"];
                                  jsonObj[i]["text"] = jsonObj[i]["title"];
                                  jsonObj[i]["parent"] = '#';
                                  jsonObj[i]["state"] = "closed";
                              }
                              data = JSON.stringify(jsonObj);
                          }
  
                          return data;
                      },
                      'error': function (node, XMLHttpRequest, textStatus, errorThrown) {
                          // Called on error, after error icon was created.
                          alert('Get Company error: ' + textStatus + ' detail: ' + errorThrown);
                          //return "-1";
                      }
                  }
              }
          });
  </code></pre>
  
  <h2>Companies data (parent Nodes):</h2>
  
  <pre><code>{"value":[{"Company_Id":"31","Name":"E-Dev"},{"Company_Id":"35","Name":"ggggggggggggg"},{"Company_Id":"36","Name":"ggggggggggggg"},{"Company_Id":"37","Name":"ghhhhhhhhhhhhhhhhhhhhhhh"},{"Company_Id":"38","Name":"kjjkhkh jkhh kjh khkh hkhk"},{"Company_Id":"39","Name":"iiiiiiiiiiiiiiiiii"},{"Company_Id":"40","Name":"dsfhdskfjh"},{"Company_Id":"41","Name":"dfjshfkjds"},{"Company_Id":"42","Name":"dfjshfkjds"},{"Company_Id":"43","Name":"dfjshfkjds"},{"Company_Id":"44","Name":"dfjshfkjds"},{"Company_Id":"45","Name":"dfjshfkjds"},{"Company_Id":"46","Name":"dfjshfkjds"},{"Company_Id":"47","Name":"dfjshfkjds"},{"Company_Id":"48","Name":"dfjshfkjds"},{"Company_Id":"49","Name":"dfjshfkjds"},{"Company_Id":"50","Name":"dfjshfkjds"},{"Company_Id":"51","Name":"dfjshfkjds"},{"Company_Id":"52","Name":"dfjshfkjds"},{"Company_Id":"53","Name":"dfjshfkjds"},{"Company_Id":"54","Name":"dfjshfkjds"},{"Company_Id":"55","Name":"dzfdfskdfh"},{"Company_Id":"56","Name":"sdfhdsfh"},{"Company_Id":"57","Name":"jfhjdsfhsdhfj"},{"Company_Id":"58","Name":"fdhafksdfkjdsfhsdk"},{"Company_Id":"59","Name":"dfksdfhksdhfkskd"},{"Company_Id":"60","Name":"test"},{"Company_Id":"61","Name":"test"},{"Company_Id":"62","Name":"ErnestDev"},{"Company_Id":"63","Name":"EarnestDev"},{"Company_Id":"64","Name":"Earnestdev"},{"Company_Id":"65","Name":"hsdkfhksdhkfjh"}]}
  </code></pre>
  
  <h2>Sites (children of companies) data:</h2>
  
  <pre><code>{"value":[{"Site_Id":"31","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"35","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"36","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"38","Company_Id":"24","Name":"Nottingham"}]}
  </code></pre>
  
  <h2>Agents (not applicable at this point though)</h2>
  
  <pre><code>{"value":[{"Agent_Id":"61","Name":"","Site_Id":"40"},{"Agent_Id":"62","Name":"","Site_Id":"41"},{"Agent_Id":"63","Name":"","Site_Id":"42"},{"Agent_Id":"64","Name":"","Site_Id":"43"},{"Agent_Id":"65","Name":"","Site_Id":"44"},{"Agent_Id":"66","Name":"","Site_Id":"45"},{"Agent_Id":"67","Name":"","Site_Id":"46"},{"Agent_Id":"180","Name":"","Site_Id":"49"},{"Agent_Id":"181","Name":"","Site_Id":"49"},{"Agent_Id":"182","Name":"","Site_Id":"49"},{"Agent_Id":"183","Name":"","Site_Id":"49"},{"Agent_Id":"184","Name":"","Site_Id":"49"}]}
  </code></pre>
  
  <p>Please note that this is only sample data and the wcf odata services being queried are <strong>CORS enabled</strong>. Please also note that i am successfully populating the parent nodes. </p>
  
  <p>Also, please note that any typo found here would only be a result of editing this post to protect crucial data.</p>
  
  <p>I <strong>am only facing issue with populating children nodes and children of children nodes.</strong></p>
  
  <p><strong>Kindly help. I am kind of stuck trying all kinds of jstree options.. :(</strong></p>
  
  <h2>Edit:</h2>
  
  <h2>Parent Nodes that I get:</h2>
  
  <p><img src="https://i.stack.imgur.com/27J2L.png" alt="Parent Nodes populated in jstree"></p>