Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components

TreeView / Loading Icon

In this sample whenever an item is expanded the expand box icon is replaced with an animated gif which appears until data is fully loaded. For this purpose two methods are used:

  • beginLoad - starts the load process and replaces the expand box icon with an animated gif
  • endLoad - ends the loading process and returns the default expand box appearance back to normal

By using these methods you can notify the user that some data is about to be loaded inside a specified item. You can use any custom animated gif as loading icon, simply by changing the corresponding CSS style for the expand box.

<!DOCTYPE html>



<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>



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

<iui-treeview name="{{treeName}}" items="data" before-expand="onBeforeExpand(e)"></iui-treeview>





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

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

$ = [];

$scope.insertPos = 0;

$scope.removePos = 0;

$scope.treeName = "treeSample";


var itemCount = 0;


var createNewItem = function(){


return { text: "Item" + itemCount, expanded: false, hasChildren: true };



var initTimer = $timeout(function(){

$treeService.addItem($scope.treeName, createNewItem());


}, 1);


$scope.onBeforeExpand = function(e){

if (e.item.items && e.item.items.length > 0)


else {

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


var loadTImer = $timeout(function(){


for (var i = 0; i < 3; i++)

$treeService.addItem($scope.treeName, createNewItem(), e.item);


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

}, 1000);