SHARE
TWEET

Dojo Tree View Node Collapse SSCE

a guest Jan 12th, 2012 175 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
  5.         <script type="text/javascript">
  6.             dojo.require("dojo.data.ItemFileReadStore");
  7.             dojo.require("dijit.Tree");
  8.  
  9.             var dojo_data = {identifier: 'id', label: 'text', items: [
  10.                  {id:'-1', text:'root', children:[
  11.                      {_reference:'0'}
  12.                     ,{_reference:'1'}
  13.                     ,{_reference:'2'}]}
  14.                 ,{id: '0', text:'Zero', forestRoot: true, children: [
  15.                     {_reference:'3'}]}
  16.                 ,{id: '1', text:'One', forestRoot: true, children: [
  17.                     {_reference:'4'}]}
  18.                 ,{id: '2', text:'Two', forestRoot: true, children: [
  19.                     {_reference:'5'}]}
  20.                 ,{id: '3', text:'Three'}
  21.                 ,{id: '4', text:'Four'}
  22.                 ,{id: '5', text:'Five'}
  23.             ]};
  24.  
  25.             dojo.ready(function ( ) {
  26.                 var data_store = new dojo.data.ItemFileReadStore({data:dojo_data});
  27.                 var tree_model = new dijit.tree.ForestStoreModel({
  28.                         rootId: '-1',
  29.                         store: data_store,
  30.                         query: {forestRoot: true},
  31.                         childrenAttrs: ["children"]});
  32.                 tree_view = new dijit.Tree(
  33.                         {model: tree_model, showRoot: false, autoExpand: true},
  34.                         'tree_view_container');
  35.             });
  36.  
  37.             function collapse ( )
  38.             {
  39.                 tree_view.rootNode.getChildren()[0].collapse();
  40.             }
  41.  
  42.             function expand ( )
  43.             {
  44.                 tree_view.rootNode.getChildren()[0].expand();
  45.             }
  46.         </script>
  47.     </head>
  48.     <body class="claro">
  49.         <p style="width: 30em;">Click the Collapse button.  Now click the expand icon next to the collapsed node.
  50.         Note that it will not expand.  Now click the Expand button.  Now click the
  51.         expand icon next to the node multiple times.  Note that it now behaves
  52.         correctly.</p>
  53.         <input type="button" name="Collapse" value="Collapse" onclick="collapse();"/>
  54.         <input type="button" name="Expand" value="Expand" onclick="expand();"/>
  55.         <div id="tree_view_container"></div>
  56.     </body>
  57. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top