LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Dynamically Add Items


This sample shows how to add new items dynamically by using an 'Add New Item' button which when clicked, will create a new item with input focus set to a textbox. This allows you to quickly add a new item when required, with content set on run-time.

When label editor appears, you can enter the value of the editing item. To confirm the changes, press the ENTER key. This will close the editor.

If the item is empty (meaning its text value is empty string), the item will be automatically removed, when label editor losses its focus.

In this example, the following methods and events are used:

  • clearSelection - removes selection from items
  • insertItemAt - inserts a new item at specified position
  • openEditor - opens the editor for specified item
  • removeItem - removes a specified item
  • lostFocus - occurs when editor loses the input focus
  • afterLabelEdit - occurs when after label editing is completed

<!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-flat-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">

<div class="top-panel">

<button ng-click="onAddItem()"><span class="icon-add"></span>Add New Item</button>

<button ng-click="onRemoveItem()"><span class="icon-remove"></span>Remove Item</button>

</div>

<iui-treeview name="{{treeName}}" items="items" item-removing="onItemRemoving(e)" item-removed="onItemRemoved(e)" label-edit="true" lost-focus="onLostFocus(e)" after-label-edit="onAfterLabelEdit(e)" item-click="onItemClick(e)"></iui-treeview>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

 

$scope.items = [

{ id: 1, text: "Item1" },

{

id: 2,

text: "Item2",

items: [

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

]

},

];

 

// Code which updates current selection after item is removed

var itemIndex = -1;

var parent = null;

 

$scope.onItemRemoving = function(e){

itemIndex = -1;

 

parent = $treeService.getItemParent($scope.treeName, e.obj);

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

if (list && list.length > 0)

itemIndex = list.indexOf(e.obj);

}

 

$scope.onItemRemoved = function(e){

var updateTimer = $timeout(function(){

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

if (list && list.length > 0){

if (itemIndex == list.length)

itemIndex = list.length - 1;

 

span class="code-lang">if (itemIndex >= 0 && itemIndex < list.length){

if (itemIndex < list.length)

$treeService.selectedItem($scope.treeName, list[itemIndex]);

else

$treeService.selectedItem($scope.treeName, list[list.length-1]);

}

}

else if (parent)

$treeService.selectedItem($scope.treeName, parent);

else

$treeService.selectedItem($scope.treeName, null);

 

$timeout.cancel(updateTimer);

}, 1);

}

 

var itemCount = 3;

var newItem = null;

 

$scope.onAddItem = function(){

itemCount++;

 

newItem = {

id: itemCount,

text: ""

}

 

$treeService.insertItemAt($scope.treeName, newItem, 0, $treeService.selectedItem($scope.treeName));

 

var delayTimer = $timeout(function(){

$treeService.openEditor($scope.treeName, newItem);

 

$timeout.cancel(delayTimer);

}, 100);

}

 

$scope.onRemoveItem = function(){

var selItem = $treeService.selectedItem($scope.treeName);

$treeService.removeItem($scope.treeName, selItem);

}

 

var isItemEmpty = function(item){

return item.text == '';

}

 

$scope.onLostFocus = function(e){

if (e.edit && newItem && isItemEmpty(newItem))

$treeService.removeItem($scope.treeName, newItem);

}

 

$scope.onAfterLabelEdit = function(e){

if (e.item && e.item.text != '')

$treeService.selectedItem($scope.treeName, e.item);

}

 

$scope.onItemClick = function(e){

if (!e.item)

$treeService.clearSelection($scope.treeName);

}

}]);

.iui-treeview-item

{

margin: 3px 0;

}

.iui-treeview-item-content

{

padding: 4px;

}

.top-panel

{

background: #2455b0;

padding: 3px;

margin-bottom: 1px;

width: 400px;

}

button

{

background: transparent;

border: thin solid transparent;

color: white;

padding: 5px 10px;

display: inline-block;

vertical-align: middle;

}

button:hover

{

background-color: #153268;

border: thin solid #0F244A;

}

.icon-add

{

background: url("../../../resources/icons-x24.png") no-repeat -48px -120px;

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

}

.icon-remove

{

background: url("../../../resources/icons-x24.png") no-repeat -72px -120px;

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

}