tree.view

TreeView : d2/sdk/controls/tree/tree.view

Tree View, renders data into a tree structure. Internally it is implemented using Fancytree.

Extends: Marionette.ItemView
Example (A sample tree construction may look like)

define([
 'nuc/lib/marionette',
 'd2/sdk/controls/tree/tree.view',
 'hbs!mybundle/test/test.tree'
], function(Marionette, TreeView, template){

 var MyTreeView = Marionette.LayoutView.extend({
   template: template,

   regions: {
     rgnTree: '.rgnTree'
   },

   constructor: function MyTreeView(options) {
     options = options || {};
     MyTreeView.__super__.constructor.call(this, options);
   },

   onRender: function() {
     if(!this.treeView) {
       this.treeView = new TreeView(this._buildTreeOptions());
       this.rgnTree.show(this.treeView);
     }
   },

   _buildTreeOptions: function() {
     var treeOption = {
       source: [
         //This demonstrates how to initialize a tree with literal data only
         {title: "Node 1", key: "1"},
         {title: "Folder 2", key: "2", folder: true, children: [
           {title: "Node 2.1", key: "3"},
           {title: "Node 2.2", key: "4"}
         ]}
       ]
     };

     return treeOption;
   }
 });

 return MyTreeView;
});

Example ( where the content of mybundle/test/test.tree.hbs is as follows )

<div class="rgnTree"></div>

• TreeView : d2/sdk/controls/tree/tree.view
  • ~TreeView
    • new TreeView(options)
  • ~FancytreeEventCallback : function

TreeView~TreeView

Kind: inner class of TreeView

new TreeView(options)

Param	Type	Description
options	object	Construction options holder. Only a subset of
[options.activate]	FancytreeEventCallback	Called when some node is activated.
[options.beforeActivate]	FancytreeEventCallback	Called when some node is about to become active.
[options.click]	FancytreeEventCallback	Called when a node is clicked.
[options.clickPaging]	FancytreeEventCallback	Called when a paging status node is clicked. A paging status node is used to render more siblings at given depth.
[options.collapse]	FancytreeEventCallback	Called when a node is collapsed.
[options.dblclick]	FancytreeEventCallback	Called when a node is clicked twice.
[options.expand]	FancytreeEventCallback	Called when a node is expanded.
[options.focus]	FancytreeEventCallback	Called when a node receives keyboard focus.
[options.init]	FancytreeEventCallback	Called when the tree reaches a particular state, when tree is initialized, source data is loaded & visible nodes are rendered.
[options.keydown]	FancytreeEventCallback	Called when a node has received a keyboard event.
[options.lazyLoad]	FancytreeEventCallback	Called when data.node is expanded for the first time. The children data must be returned in data.results property.
[options.source]	*	Used to compute/collect data for the initial tree rendering. Can return a jQuery promise which can then later be resolved with tree data. See NodeData.
[options.strings]	Object	Key-value pairs used for translations.

TreeView~FancytreeEventCallback : function

Kind: inner typedef of TreeView

Param	Type	Description
event	jQueryEvent	A jquery event representing interaction.
data	FancytreeEventData	Data associated with the event.