<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Tree List From JSON | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured widget menu Uize.Widgets.NavTree.List.Widget"/>
  <meta name="description" content="See a demo of a JavaScript expandable / collapsible tree list widget, that can be easily built from a JSON object and can even be dynamically updated."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Tree List From JSON
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/tree-list.html" class="buttonLink">SOURCE</a></div>

  <div style="margin:auto; width:762px;">
    <div id="page-treeList" class="contents-tree" style="width:210px; height:460px; float:left; overflow:auto; margin-right:10px; border:1px solid #9aa; padding:10px; margin-left:10px; background:#fff;"></div>
    <div style="width:500px; float:left;">
      <!-- explanation copy -->

      <div class="explanation">
        <p>In this example, an instance of <a href="../reference/Uize.Widgets.NavTree.List.Widget.html"><code>Uize.Widgets.NavTree.List.Widget</code></a> is instantiated to produce a multi-level contents tree. The markup for the list is generated when the widget is wired up. The structure for the markup is driven by a JSON data structure that is supplied to the <code>items</code> state property of the widget. This data structure is purely for demonstration purposes, so none of the items have active links specified (i.e. clicking does nothing).</p>

        <p>If you hold down the shift key when clicking to expand a level, you can expand the contents of that level to only one level deep. This is convenient when trying to expand a tree bit by bit. Holding down the ctrl key when expanding a level will expand the contents of that level fully. Whenever you collapse a level and expand it again later, its contents are restored to the way they were before you collapsed the level.</p>

        <p>Below are some links that execute snippets of code to demonstrate the programmatic interface of the widget.</p>

      <!-- programmatic interface examples -->

      <div class="programmaticInterface" style="margin-top:0;">
              <li><a href="javascript://" class="linkedJs">treeList.setExpandedDepth (0)</a></li>
              <li><a href="javascript://" class="linkedJs">treeList.setExpandedDepth (1)</a></li>
              <li><a href="javascript://" class="linkedJs">treeList.setExpandedDepth (2)</a></li>
              <li><a href="javascript://" class="linkedJs">treeList.setExpandedDepth (3)</a></li>
              <li><a href="javascript://" class="linkedJs">treeList.setExpandedDepth (4)</a></li>
            <a href="javascript://" class="linkedJs">treeList.set ({items:animalsAndPlants})</a><br/>
              <li><a href="javascript://" class="linkedJs">treeList.collapseAllBut (['Animals','Wild Animals','Cats'])</a></li>
              <li><a href="javascript://" class="linkedJs">treeList.collapseAllBut (['Plants','Bushes and Shrubs','Hedges'])</a></li>
            <a href="javascript://" class="linkedJs">treeList.set ({items:Uize.Test.TestData.Animals ()})</a><br/>
              <li><a href="javascript://" class="linkedJs">treeList.collapseAllBut (['Pets','Dogs','Large Breeds'])</a></li>
            <a href="javascript://" class="linkedJs">treeList.set ({items:Uize.Test.TestData.Plants ()})</a><br/>
              <li><a href="javascript://" class="linkedJs">treeList.collapseAllBut (['Trees','Deciduous'])</a></li>
    <div style="clear:left;"></div>

<!-- JavaScript code to create tree list instance and insert and wire its UI -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the tree list child widget ***/
        animalsAndPlants = Uize.Test.TestData.AnimalsAndPlants (),
        treeList = page.addChild (

    /*** wire up the page widget ***/
      page.wireUi ();