JavaScript TreeGrid

Bind to the rowCheck event by type: jqxTreeGrid. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="treeGrid"></div>

JavaScript

var data = [{
      "id": "1",
          "name": "Corporate Headquarters",
          "budget": "1230000",
          "location": "Las Vegas",
          "children": [{
          "id": "2",
              "name": "Finance Division",
              "budget": "423000",
              "location": "San Antonio",
              "children": [{
              "id": "3",
                  "name": "Accounting Department",
                  "budget": "113000",
                  "location": "San Antonio"
          }, {
              "id": "4",
                  "name": "Investment Department",
                  "budget": "310000",
                  "location": "San Antonio",
              children: [{
                  "id": "5",
                      "name": "Banking Office",
                      "budget": "240000",
                      "location": "San Antonio"
              }, {
                  "id": "6",
                      "name": "Bonds Office",
                      "budget": "70000",
                      "location": "San Antonio"
              }, ]
          }]
      }, {
          "id": "7",
              "name": "Operations Division",
              "budget": "600000",
              "location": "Miami",
              "children": [{
              "id": "8",
                  "name": "Manufacturing Department",
                  "budget": "300000",
                  "location": "Miami"
          }, {
              "id": "9",
                  "name": "Public Relations Department",
                  "budget": "200000",
                  "location": "Miami"
          }, {
              "id": "10",
                  "name": "Sales Department",
                  "budget": "100000",
                  "location": "Miami"
          }]
      }, {
          "id": "11",
              "name": "Research Division",
              "budget": "200000",
              "location": "Boston"
      }]
  }];

  var source = {
      dataType: "json",
      dataFields: [{
          name:...