LIDOR SYSTEMS

Advanced User Interface Controls and Components

Move Items in Angular TreeView

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.

TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps




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.

Different Ways to Move Items in TreeView

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)

  • name - specifies the name of the TreeView for which this method will be executed
  • item - a single item object or array of items
  • targetItem - an item used as a reference to which item(s) will be moved
  • direction - determines where item(s) will be placed
  • position - specifies the position at which the item(s) will be moved

In above parameters, the direction accepts one of the following values:

  • 'first' - item is moved at the beginning of tree hierarchy or as a first child of specified target item
  • 'before' - item is moved before the target item
  • 'at' - item is moved at specified position
  • 'after' - item is moved after the target item
  • 'last' - item is moved at the end of tree hierarchy or as a last child of specified target item

Using different values for above parameters, you can practically move item or a set of items to any position within the Angular TreeView.

Move Item One Level Up or Below

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.

Select Multiple Items and Move to Specific 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.

Conclusion

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.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.