JavaScript TreeView Control

The jQWidgets TreeView is bound to JSON Data.

by Manu Vashishtha

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">
<div id='jqxWidget'></div>

JavaScript

var theme = "";
      var data = [{
          "Id": "be448add-eb26-4f9c-9313-a21800e61e07",
          "Name": "Test",
          "ParentId": "00000000-0000-0000-0000-000000000000",          
          "expanded":true,
          "Isselected":false
      }, {
          "Id": "69da609e-7ef9-4f02-982c-a21800e675ef",
          "Name": "Test 1",
          "ParentId": "be448add-eb26-4f9c-9313-a21800e61e07",
          "expanded":true,
          "Isselected":true
      }, {
          "Id": "f053819e-87a4-404a-9cce-a21800e69894",
          "Name": "Test 1-2",
          "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef",
          "expanded":false,
          "Isselected":false
      }, {
          "Id": "7938d9cd-96ba-4cc8-b030-a21800e6b00c",
          "Name": "Test 1-3",
          "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef",
          "expanded":false,
          "Isselected":false
      }];
      // prepare the data
      var source = {
          datatype: "json",
          datafields: [{
              name: 'Id'},
              {name: 'ParentId'},
              {name: 'Name'},
              {name:'Isselected'},
              {name:'expanded'}],
          id: 'Id',
          localdata: data
      };
      // create data adapter.
      var dataAdapter = new $.jqx.dataAdapter(source);
      // perform Data Binding.
      dataAdapter.dataBind();
      var records = dataAdapter.getRecordsHierarchy('Id', 'ParentId', 'items', [{
          name: 'Name',
          map: 'label',
          selected:'Isselected'
      }]);
      $('#jqxWidget').jqxTree({
          source: records,
          width: '300px',
          theme: theme
      });