causeway-standard-theme/causeway/docs/components/treesearchlist.html

<div class="container page shell-left-navigation">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Tree Search List</h2>
      </div>
      <div class="navigation-content">
        <div id="tree-search-list" class="tree-list tree-search-list"></div>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation">
    <span class="handle"></span>
  </div>
  <div class="navigation-pane-right">
    <div class="pane">
      <a id="treesearchlist"></a>
      <header class="content-header">
        <h1 class="title">Tree Search List</h1>
      </header>

      <h3 class="title">Sample JSON Data:</h3>
      <pre><code>
  var data = [
    {
      'id': '62',
      'selected': false,
      'children': [
        {
          'id': '63',
          'selected': false,
          'children': [{
            'id': '67',
            'selected': false,
            'children': [
              {
                'id': '78',
                'selected': false,
                'label': 'AL St Albans'
              },
              {
                'id': '79',
                'selected': false,
                'label': 'BR Bromley'
              },
              {
                'id': '80',
                'selected': false,
                'label': 'CM Chelmsford'
              }
            ],
            'label': 'England'
          }],
          'label': 'Europe'
        },
        {
          'id': '176',
          'selected': false,
          'label': 'India'
        },
        {
          'id': '64',
          'selected': false,
          'children': [
            {
              'id': '68',
              'selected': false,
              'children': [
                {
                  'id': '81',
                  'selected': false,
                  'label': 'Rustaq'
                },
                {
                  'id': '82',
                  'selected': false,
                  'label': 'Sohar'
                },
                {
                  'id': '184',
                  'selected': false,
                  'label': 'Sohar1'
                }
              ],
              'label': 'Oman'
            },
            {
              'id': '69',
              'selected': false,
              'children': [
                {
                  'id': '85',
                  'selected': false,
                  'label': 'Abu Dhabi'
                },
                {
                  'id': '86',
                  'selected': false,
                  'label': 'Dubai'
                }
              ],
              'label': 'United Arab Emirates'
            }
          ],
          'label': 'Middle East'
        },
        {
          'id': '183',
          'selected': false,
          'label': 'iNdia'
        },
        {
          'id': '181',
          'selected': false,
          'label': 'india'
        }
      ],
      'label': 'Coverage'
    }
  ];
      </code></pre>

      <h3 class="title">Code:</h3>
      <pre><code>
  &lt;div id=&quot;tree-search-list&quot; class=&quot;tree-list&quot; data-treelist-buttons=&quot;true&quot;&gt;

  &lt;/div&gt;

  &lt;!-- Initialize --&gt;
  window.Causeway.treeList.init('#tree-search-list', data, Options);
  Options object is optional.

  &lt;!--To get the updated JSON--&gt;
  window.Causeway.treeList.toJson('#tree-search-list'); // This will return JSON Data
      </code></pre>
    </div>
  </div>
</div>