VisualizeCascadingTree

A hierarchical, tree based (cascading) input control

The samples here show a hierarchical tree, based on the popular Javascript Fancytree control [https://github.com/mar10/fancytree]. Samples are here: [http://wwwendt.de/tech/fancytree/demo/index.html]

There are some reusable components you can use if you want to include this functionality in your own web application.

##VisualizeCascadingTree object

function VisualizeCascadingTree(
  visualizeObj,                // the visualize.js main object
	divSelector,                 // the div tag the tree will display in
	aHierarchyName,              // the top level input control of a set of cascading input controls
	reportUri,                   // the report in JasperReports Server the input controls are attached to
	
	// Optional parameters
	nodeInitializationFunction,  // function to control the contents of the displayed nodes in the tree. There is a default
	                             // See [http://www.wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html] 
	bootstrap,                   // true/false. uses bootstrap glyph icons if true
	treeOptions)                 // Fancytree options. see [http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions]

This control uses visualize and Fancytree to populate and control the hierachical display in a "lazy" manner - only getting values through visualize as needed. It handles mixed single and multi-select hierarchies by controlling the "select" action on the displayed values in the tree.

depends on:

• visualize.js

• jquery.min.js

• jquery-ui-1.10.4.custom.min.js

• jquery.fancytree-all.min.js

• underscore-min.js

• ui.fancytree.css - a Fancytree skin, select from [https://github.com/mar10/fancytree/tree/master/dist]

if using bootstrap: bootstrap.min.js and bootstrap CSS.

For example:

// default rendering of a report
report = visualizeObj.report({
        resource: "/Reports/Regional_Sales",
        container: "#container",
        params: {
            "Country": ["All"]
        },
	error: handleError
});

var myTree = new VisualizeCascadingTree(
	  visualizeObj,
	  '#tree',
	  "Country", 
	  "/Reports/First_Cascading",
	  countryTreeNode,
	  null, // no bootstrap
	  null) // no additional Fancytree options
	  
/*
	Label for this IC is Country | State | City.
	Just want to show the lowest value as title on node.
	
  option.value - what will be returned to the report and other input controls
  option.label - display value for the user
  option.selected - is this option selected, based on prior operations
 */
function countryTreeNode(option, iC, isBottomOfHierarchy) {
	return { key: option.value,
					 title: option.value,
					 icon: false,
					 lazy: !isBottomOfHierarchy };
}


function runReport() {
	var params = myTree.getSelectedAsParamsArray();
	report.params(params).run();
}