TutorialIntegration

About integration of Fancytree into existing frameworks.

Recipes

[Howto] Run Fancytree with Angular 4

Contributed by mojo2405

After few days of experimenting I managed to run perfectly Fancytree on Angular 4. You should add it to the manual.

1. Install jQuery and Fancytree via npm:
   npm install jquery jquery.fancytree

2. Install jQuery and Fancytree typings:
   npm install --save @types/jquery @types/jquery.fancytree

3. Include jQuery and Fancytree in scripts array inside .angular-cli.json, e.g.:

   "scripts": [
           "../node_modules/jquery/dist/jquery.min.js",
           "../node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"
           ]

4. Include Fancytree style inside styles array inside .angular-cli.json . e.g.:
   

   "styles": [
       "../node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css"
       ],

5. Add jQuery and Fancytree to types array inside tsconfig.app.json file, e.g.:

   "compilerOptions": {
       ...
       "types": ["jquery","jquery.fancytree"]
   }

6. Add Fancytree html to html component, e.g.:

   <div id="tree">
     <ul>
       <li>Root node 1
         <ul>
           <li>Child node 1</li>
           <li>Child node 2</a></li>
         </ul>
       </li>
     </ul>
   </div>

7. Add jQery Fancytree to your typescript file, e.g.:

   ngOnInit() {
     $('#tree').fancytree();
   }

[Howto] Use Fancytree with with requirejs

Contributed by djangosdk

Currently there is very little documentation to show how to work with requirejs with latest version. Here is how made it work with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.

requirejs.config({
  paths: {
    'jquery': './js/vendor/jquery',
    'jquery-ui': './js/vendor/jquery-ui',
    'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
  },
  shim: {
    'jquery.fancytree': {
      deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
      exports: 'jQuery.fn.fancytree'
    }
  },
  onBuildWrite: function (moduleName, path, contents) {
    'use strict';
    if (moduleName === 'jquery.fancytree') {
      contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
    }
    return contents;
  }
});

// usage
 define([
     'jquery',
     'jquery.fancytree',
     'css!./css/fancytree/skin-custom/ui.fancytree.css',
   ],
   function($) {
     'use strict';
     //
     $('#tree').fancytree({
       checkbox: true,
       source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
     });
     //
   });
//