Guest User

Dojo Tree View Node Collapse SSCE

a guest
Jan 12th, 2012
227
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