TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 06 January 2016
In tree hierarchy, items already have their position set, and the TreeView directive is populated accordingly. We can change the item position and reorder them either using drag drop, or move items using a built-in method from your app code. This allow you to create custom behavior on how and when items are moved in your applications.
In our example, using the control panel on the right, you can move items to a specific position, place them above or below specific item, or move item at the beginning or the end of tree hierarchy.
In order to move items manually, we will use the moveItem method. This method, depending on parameters set, can move one or more items in different ways:
moveItem(name, item, targetItem, direction, position)
In above parameters, the direction accepts one of the following values:
Using different values for above parameters, you can practically move item or a set of items to any position within the Angular TreeView.
By using the moveItem method, you can easily change the item level. In code below, item is moved one level up, so that its parent now becomes its sibling.
// Get the currently selected item
var selItem = $treeService.selectedItem($scope.treeName);
if (selItem){
// Get the parent of the currently selected item
var parentItem = $treeService.getItemParent($scope.treeName, selItem);
// Move the selected item before its parent
$treeService.moveItem($scope.treeName, selItem, parentItem, 'before');
}
This is done by setting the value of direction to 'before' and using its parent item as a target. The position parameter in this case is not used, because the referencing traget item determines the new position.
Instead of moving items one by one, we can move a chunk of items with one call. In this example, you can select multiple items and move them at specified position.
In this case, we are not using target item as a reference, we are specifying an index at which we want to move the selected items. For example, to move array of items to second position inside specified target item, the moveItem is called with following settings:
// Retrieve a list of currently selected items
var selItems = $treeService.selectedItems($scope.treeName);
// Move selected items as children of specified targetItem and place them at second position
if (selItems)
$treeService.moveItem($scope.treeName, selItems, targetItem, 'at', 1);
In above code target item can be any other non-selected item. If the target item has no children, then moved items will be placed at position 0.
In order to move items in Angular TreeView directive, you can use the moveItem method and reorder items manually from code. This allows you to set different conditions in your application and create custom behavior for moving items. For example, you can add a context menu with options for reordering of items, or some other behavior more suitable for your applications.