LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Move Items






This sample shows how to change the order of tree items dynamically from code, by using built-in method.

Using 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. The following method is used:

  • moveItem(name, item, targetItem, direction, position) - specifies direction at which item or set of items will be moved.

In order to see how this works, select one or more items and then choose the direction and position at which they will be moved. To select multiple items, press and hold the CTRL or SHIFT key and click on items.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" class="directive" items="data" selection-mode="multi-extended"></iui-treeview>

<div class="control-panel">

<label>Direction: </label>

<select ng-model="selDirection" ng-options="direction for direction in directions"></select><br/>

<label>Target Item: </label>

<select ng-model="targetItem" ng-options="item.text for item in flatList"></select><br/>

<label>Position:</label> <input ng-model="position" type="number" min="-1" max="100" style="width:35px" /><br/><br/>

<button ng-click="moveItem()">Move Item(s)</button>

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){

$scope.treeName = "treeSample";

$scope.flatList = [];

$scope.targetItem = null;

$scope.position = -1;

 

$scope.directions = [ 'first', 'before', 'at', 'after', 'last' ];

$scope.selDirection = $scope.directions[0];

 

$scope.data = [

{

id: 1,

text: "Item1",

items: [

{ id: 11, pid: 1, text: "Item11" },

{

id: 12,

pid: 1,

text: "Item12",

items: [

{ id: 121, pid: 12, text: "Item121" },

{

id: 122,

pid: 12,

text: "Item122",

expanded: false,

items: [

{ id: 1221, pid: 122, text: "Item1221" },

{ id: 1222, pid: 122, text: "Item1222" }

]

},

{ id: 123, pid: 12, text: "Item123" },

{ id: 124, pid: 12, text: "Item124" },

{ id: 125, pid: 12, text: "Item125" }

]

},

{ id: 13, pid: 1, text: "Item13" },

{

id: 14,

pid: 1,

text: "Item14",

items: [

{ id: 141, pid: 14, text: "Item141" },

{ id: 142, pid: 14, text: "Item142" }

]

}

]

},

{

id: 2,

text: "Item2",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Item21" },

{ id: 22, pid: 2, text: "Item22" },

{

id: 23,

pid: 2,

text: "Item23",

expanded: false,

items: [

{ id: 231, pid: 23, text: "Item231" },

{ id: 232, pid: 23, text: "Item232" }

]

}

]

},

{ id: 3, text: "Item3" },

{ id: 4, text: "Item4" },

{ id: 5, text: "Item5" },

{

id: 6,

text: "Item6",

items: [

{ id: 61, pid: 6, text: "Item61" },

{ id: 62, pid: 6, text: "Item62" }

]

},

{ id: 7, text: "Item7" }

];

 

var updateTargetItems = function(){

$scope.flatList.length = 0;

$scope.flatList.push({ text: "" });

 

var list = $treeService.getList($scope.treeName, null, true);

for (var i = 0; i < list.length; i++)

$scope.flatList.push(list[i]);

 

$scope.targetItem = $scope.flatList[0];

}

 

var initTimer = $timeout(function(){

updateTargetItems();

 

$treeService.expand($scope.treeName);

 

$timeout.cancel(initTimer);

}, 1);

 

$scope.moveItem = function(){

var selItems = $treeService.selectedItems($scope.treeName);

if (selItems){

if (selItems.indexOf($scope.targetItem) >= 0)

alert("Move operation canceled. Target Item cannot also be a moving item!");

else {

$treeService.moveItem($scope.treeName, selItems, $scope.targetItem && $scope.targetItem.text ? $scope.targetItem : null, $scope.selDirection, $scope.position);

 

updateTargetItems();

}

}

}

}]);

label

{

display: inline-block;

margin-right: 5px;

text-align: right;

width: 100px;

}

select

{

margin: 2px 0 5px 0;

padding: 2px;

width: 110px;

}

button

{

margin: 20px 5px 0 5px;

padding: 5px;

width: 220px;

}

.inline-block

{

display: inline-block;

margin: 3px 0;

}

.inline-button

{

width: 85px;

margin-right: 3px;

}