JQuery TreeGrid

Invoke the updateBoundData method of the jqxTreeGrid. Author: http://jqwidgets.com

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>
<input type="button" style="margin: 20px;" id="jqxbutton" value=" Invoke the updateBoundData method" />

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: "name", type: "string" },
        { name: "budget", type: "number" },
        { name: "id", type: "number" },
        { name: "children", type: "array" },
        { name: "location", type: "string" }
      ],
      hierarchy:
      {
        root: "children"
      },
      localData: data,
      id: "id"
    };

var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function () {

  }
});

$("#treegrid").jqxTreeGrid({
  width:  650,
  source: dataAdapter,
  altRows: true,
  autoRowHeight: false,
  ready: function () {
    // Expand rows with ID = 1, 2 and 7
   ...