Problem
I am using a tree to display business units and their employees. From this tree, I need to populate another new tree, by selecting a) a whole business unit or b) a user within a business unit. The selected item should then be moved to my newly created tree, without loosing his parent (in case of user). I also need to remove business units or employees from my newly created tree.
Solution
Created two trees with 4 buttons between them. These buttons move data between the trees.
Detailed explanation
Problem
When creating new employees within the application, the employee can have administrator status, which mean, we must assign certain business units and/or employees to the newly created employee. When displaying these business units and employees to select from, we make use of the tree component. To capture the selected business units and/or employees, we need to move the tree items to a newly created tree without losing business units when only employees are selected.
Solution
To transfer data from the 'source' tree to the 'selected' tree, we make use of 4 different buttons.
- Move all business units and their employees
- Move a single business unit or employee
- Remove a single employee or business unit
- Remove all business units and their employees
Please note that the data for the 'source' tree, will never change for it represents the actual company structure.
Calling the two-tree-component to render the trees:
<renderers:HDoubleTreeBox
top="4" right="4" left="4" bottom="35" width="100%" height="100%"
sourceProvider="{treeData}"
selectedResults="{selectedResults}"
sourceHeaderText="Found Business Units:"
selectedHeaderText="Area of Administration:"
dataField="label"
horizontalScrollPolicy="off"/>
-------------------------------------------------------------------------------------------------------------------
Two-tree-component:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.events.ListEvent;
import mx.controls.Alert;
/** The data provider of the source grid. */
[Bindable]
public var sourceProvider:Array = new Array();
/** The data field of the source and result grids. */
[Bindable]
public var dataField:String = "";
/** The header text for the source tree. */
[Bindable]
public var sourceHeaderText:String = "";
/** The header text for the selected tree. */
[Bindable]
public var selectedHeaderText:String = "";
/** The currently selected results. */
[Bindable]
public var selectedResults:Array = new Array();
/** The enabled state of the control's buttons. */
[Bindable]
public var buttonsEnabled:Boolean = true;
/** Called when the add selected button is clicked. */
private function handleAddSelectedButtonClick():void {
// make a copy of the selected tree item and its parent
var selectedSourceItem:Object = ObjectUtil.copy(sourceGrid.selectedItem);
var selectedSourceParent:Object = ObjectUtil.copy(sourceGrid.getParentItem(sourceGrid.selectedItem));
var foundBusinessUnit:Boolean = false;
var foundPerson:Boolean = false;
var lenSelectedList:int = selectedResults.length;
// 1. selected item is a branch
if (selectedSourceParent == null) { // branch is selected to be moved to selected tree
for(var i:int = 0; i < lenSelectedList; i++) {
if (selectedResults[i][dataField] == selectedSourceItem[dataField]) {
foundBusinessUnit = true;
}
}
// add new parent and children if business unit not found
if(!foundBusinessUnit) {
selectedResults.push(selectedSourceItem);
}
var k:int = 0;
} else {
// 2. selected item is a person
for(var b:int = 0; b < lenSelectedList; b++) {
if (selectedResults[b][dataField] == selectedSourceParent[dataField]) {
foundBusinessUnit = true;
}
}
// add new parent and child if business unit not found
if(!foundBusinessUnit) {
selectedSourceParent.children = new Array(selectedSourceItem);
selectedResults.push(selectedSourceParent);
} else {
var lenSelectList:int = selectedResults.length;
// find the child
for(var c:int = 0; c < lenSelectList; c++) {
if (selectedResults[c][dataField] == sourceGrid.getParentItem(sourceGrid.selectedItem)[dataField]) {
var lenChildren:int = selectedResults[c].children.length;
for (var d:int = 0; d < lenChildren; d++) {
if (selectedResults[c].children[d][dataField] == sourceGrid.selectedItem[dataField]) {
foundPerson = true;
}
}
}
}
// add person to children
if(!foundPerson) {
for(var e:int = 0; e < lenSelectList; e++) {
if (selectedResults[e][dataField] == sourceGrid.getParentItem(sourceGrid.selectedItem)[dataField]) {
selectedResults[e].children.push(selectedSourceItem);
}
}
}
}
}
// refresh the tree
resultGrid.invalidateList();
}
/** Called when the remove selected button is clicked. */
private function handleRemoveSelectedButtonClick():void {
if(resultGrid.selectedItem == null) {
Alert.show("Please select an item to remove from the 'Selected " + sourceHeaderText + "' list.");
} else {
var selectedResultsItem:Object = resultGrid.selectedItem;
var selectedResultsParent:Object = resultGrid.getParentItem(resultGrid.selectedItem);
var lenResults:int = selectedResults.length;
// 1. selected item is a branch
if (selectedResultsParent == null) {
for(var k:int = 0; k < lenResults; k++) {
if (selectedResults[k][dataField] == selectedResultsItem[dataField]){
selectedResults.splice(k, 1);
}
}
} else {
// 2. selected item is a person
for(var j:int = 0; j < lenResults; j++) {
if (selectedResults[j][dataField] == selectedResultsParent[dataField]){
var childIndex:int = selectedResults[j].children.indexOf(selectedResultsItem)
selectedResults[j].children.splice(childIndex, 1);
// if all children is removed, remove the parent
if (selectedResults[j].children.length == 0) {
selectedResults.splice(j, 1);
}
}
}
}
// refresh the tree
resultGrid.invalidateList();
}
}
/** Called when the add all button is clicked. */
private function handleAddAllButtonClick():void {
for(var i:int = 0; i < sourceProvider.length; i++) {
var canAdd:Boolean = true;
for(var q:int = 0; q < selectedResults.length; q++) {
if(selectedResults[q][dataField] == sourceProvider[i][dataField]) {
canAdd = false;
}
}
if(canAdd == true) {
selectedResults.push(sourceProvider[i]);
}
}
// refresh the tree
resultGrid.invalidateList();
}
/** Called when the remove all button is clicked. */
private function handleRemoveAllButtonClick():void {
selectedResults = new Array();
}
/** Display tree label with total users within the branch*/
private function treeSourceLabel(item:Object):String {
var label:String = item[dataField];;
if (sourceGrid.dataDescriptor.hasChildren(item)) {
label += " (" + sourceGrid.dataDescriptor.getChildren(item).length + ")";
}
return label;
}
/** Display tree label with total users within the branch*/
private function treeSelectedLabel(item:Object):String {
var label:String = item[dataField];;
if (sourceGrid.dataDescriptor.hasChildren(item)) {
label += " (" + sourceGrid.dataDescriptor.getChildren(item).length + ")";
}
return label;
}
]]>
</mx:Script>
<mx:constraintColumns>
<mx:ConstraintColumn id="boxGrid_col1" width="45%" />
<mx:ConstraintColumn id="boxGrid_col2" width="10%" />
<mx:ConstraintColumn id="boxGrid_col3" width="45%" />
</mx:constraintColumns>
<mx:Label text="{sourceHeaderText}" fontWeight="bold" y="0" left="4"/>
<mx:Tree id="sourceGrid" dataProvider="{sourceProvider}" top="20" left="4" right="boxGrid_col1:0" bottom="4"
labelFunction="treeSourceLabel" showRoot="true" />
<mx:Button label=">>" click="handleAddAllButtonClick()" verticalCenter="-45" horizontalCenter="0" width="45" enabled="{buttonsEnabled}" />
<mx:Button label=">" click="handleAddSelectedButtonClick()" verticalCenter="-17" horizontalCenter="0" width="45" enabled="{buttonsEnabled}" />
<mx:Button label="<" click="handleRemoveSelectedButtonClick()" verticalCenter="17" horizontalCenter="0" width="45" enabled="{buttonsEnabled}" />
<mx:Button label="<<" click="handleRemoveAllButtonClick()" verticalCenter="45" horizontalCenter="0" width="45" enabled="{buttonsEnabled}" />
<mx:Label text="{selectedHeaderText}" fontWeight="bold" top="0" horizontalCenter="104"/>
<mx:Tree id="resultGrid" dataProvider="{selectedResults}" labelField="{dataField}" right="4" bottom="4" top="20" left="boxGrid_col3:0"
labelFunction="treeSelectedLabel" showRoot="true"/>
</mx:Canvas>
-------------------------------------------------------------------------------------------------------------------
