title: TypeError: Cannot set property 'treeGrid' of null
body: <p>I am using jqxTreeGrid widget and running into a <code>TypeError: Cannot set property 'treeGrid' of null</code> error.</p>
  
  <p>I've come across some sources that said that the div which the table is being attached to is not being found but I <code>console.log</code> the div and it was found. </p>
  
  <p>Any other suggestions what might be causing this issue?</p>
  
  <pre><code>VIEW
  &lt;div id="treeGrid"&gt;&lt;/div&gt;
  
  
  SCRIPT
  var tableDiv = $("#treeGrid");
      var tableData = &lt;%=raw @array_with_data.to_json%&gt;;
      var treeSource, treeData;
  
      treeSource = {
          dataType: "json",
          dataFields: [
              { name: "id", type: "number" },
              { name: "foo_id", type: "number" },
              { name: "foo_name", type: "string" },
              { name: "bar_id", type: "number" },
              { name: "bar_name", type: "string" },
              { name: "noob_name", type: "string" }
          ],
          hierarchy: {
              keyDataField: { name: "id" },
              parentDataField: { name: "foo_id" }
          },
          id: "id",
          localData: tableData
      };
  
      treeData = new $.jqx.dataAdapter(treeSource);
      treeData.dataBind();
  
      // build table as a tree table:
      tableDiv.jqxTreeGrid({
          width: "100%",
          source: treeData,
          sortable: true,
          filterable: true,
          pageable: true,
          selectionMode: "singleRow",
          columns: [
              { text: "ID", dataField: "id", hidden: true },
              { text: "Foo ID", dataField: "foo_id", columnGroup: "foo", width: "20%" },
              { text: "Foo Name", dataField: "foo_name", columnGroup: "foo", width: "20%" },
              { text: "Bar ID", dataField: "bar_id", columnGroup: "bar", width: "20%" },
              { text: "Bar Name", dataField: "bar_name", columnGroup: "bar", width: "20%" },
              { text: "Noob Name", dataField: "noob_name", columnGroup: "noob", width: "20%" }
          ],
          columnGroups: [
              { text: "Foo", name: "foo" },
              { text: "Bar", name: "bar" },
              { text: "Noob", name: "noob" }
          ]
      });
  </code></pre>