title: jsTree checkbox checked from html data
body: <p>I have a ajax request returning data to show a tree with checkboxes. In de html data returned from the ajax call the check state of the items is defined using a custom data-checkstate attribute.
  How can i restore this check state in the tree?</p>
  
  <p>Expected result:</p>
  
  <p><img src="https://i.stack.imgur.com/znpIE.png" alt="expected result"></p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;JsTree test&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://static.jstree.com/latest/assets/dist/themes/default/style.min.css" /&gt;
      &lt;script src="http://static.jstree.com/latest/assets/dist/libs/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="http://static.jstree.com/latest/assets/dist/jstree.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
      $(function () {
          var ajaxResponse = 
              '&lt;ul&gt; &lt;li data-checkstate="undetermined"&gt;Parent 1' +
              '    &lt;ul&gt;' +
              '        &lt;li data-checkstate="unchecked"&gt;Child 1a' +
              '            &lt;ul&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 1a1&lt;/li&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 1a2&lt;/li&gt;' +
              '            &lt;/ul&gt;' +
              '        &lt;/li&gt;' +
              '        &lt;li data-checkstate="undetermined"&gt;Child 1b' +
              '            &lt;ul&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 1b1&lt;/li&gt;' +
              '                &lt;li data-checkstate="checked"&gt;Grantchild 1b2&lt;/li&gt;' +
              '            &lt;/ul&gt;' +
              '        &lt;/li&gt;' +
              '    &lt;/ul&gt;' +
              '&lt;/li&gt;' +
              '&lt;li data-checkstate="unchecked"&gt;Parent 2' +
              '    &lt;ul&gt;' +
              '        &lt;li data-checkstate="unchecked"&gt;Child 2a' +
              '            &lt;ul&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 2a1&lt;/li&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 2a2&lt;/li&gt;' +
              '            &lt;/ul&gt;' +
              '        &lt;/li&gt;' +
              '        &lt;li data-checkstate="unchecked"&gt;Child 1b' +
              '            &lt;ul&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 2b1&lt;/li&gt;' +
              '                &lt;li data-checkstate="unchecked"&gt;Grantchild 2b2&lt;/li&gt;' +
              '            &lt;/ul&gt;' +
              '        &lt;/li&gt;' +
              '    &lt;/ul&gt;' +
              '&lt;/li&gt; &lt;/ul&gt;';
  
          var tree = $("#container");
          tree.html(ajaxResponse);
          tree.on('loaded.jstree', function () {
              // restore tree state
              $('li[data-checkstate="checked"]').each(function () {
                  $(this).addClass('jstree-checked');
              });
              $('li[data-checkstate="undetermined"]').each(function () {
                  $(this).addClass('jstree-undetermined');
              });
          });
  
          tree.jstree({
              plugins: ["checkbox"],
              core: {
                  "themes": {
                      "icons": false
                  }
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Update:</strong>
  Edit: Moved to the answer </p>