LIDOR SYSTEMS

Advanced User Interface Controls and Components

TreeView for AngularJS with Rich Content Items

Created: 20 July 2014

TreeView directive by default shows all items using only their label. This is usefull when we want to present a simple tree structure, however in some cases we may need to add more content to each item showing more information. Using HTML5 elements we can add any kind of content to each item and arrange these elements in custom layouts. In this way we can create templates which will generate the layout for all items.

Each item in TreeView directive has a content property which can accepts HTML5 generated content. We can have each item with different kind of content or all items sharing the same layout using a template. We can change the value of this property on the fly, and the TreeView will update its content.

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

In our example we are going to create a tree structure showing countries in the world with their population percentage by region. The simplest way to create a tree structure is using plain text for country name and population percentage. However, this is not visually appealing, it is better if we can show an image for country flag, a text for country name and a progress bar with percentage showing their population. For this purpose we have created the following template:

angular

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

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

$scope.treeName = "treeSample";

 

var getItemContent = function(name, val){

var content = "<div class='item-content'>" +

"<span class='country-population'>" + val + "%</span><span>" + name + "</span>" +

"<div class='progress'>" +

"<div class='progress-value' style='width:" + val + "%'></div></div>" +

"</div>";

 

return content;

}

}]);

<!DOCTYPE html>

<html>

<head>

<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.treeview.min.js"></script>

</head>

<body>

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

<integralui-treeview name="{{treeName}}" items="data"></integralui-treeview>

</div>

</body>

</html>

<style type="text/css">

.progress

{

border: thin solid #e5e5e5;

border-radius: 5px;

position: relative;

margin: 0;

padding: 0;

vertical-align: middle;

width: 150px;

height: 5px;

}

.progress-value

{

background: #89cd89;

border-radius: 5px;

position: absolute;

width: 150px;

height: 5px;

}

.country-population

{

float: right;

font-size: 0.75em;

margin-top: 5px;

}

.directive

{

margin-top: 5px;

width: 300px;

height: 300px;

}

.i-ui-treeview-item

{

padding: 5px 0;

}

.icons

{

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0 2px;

width: 32px;

height: 32px;

vertical-align: middle;

}

.algeria

{

background-image: url(../images/algeria.png);

}

.argentina

{

background-image: url(../images/argentina.png);

}

.brazil

{

background-image: url(../images/brazil.png);

}

.canada

{

background-image: url(../images/canada.png);

}

.china

{

background-image: url(../images/china.png);

}

.egypt

{

background-image: url(../images/egypt.png);

}

.ethiopia

{

background-image: url(../images/ethiopia.png);

}

.france

{

background-image: url(../images/france.png);

}

.germany

{

background-image: url(../images/germany.png);

}

.india

{

background-image: url(../images/india.png);

}

.italy

{

background-image: url(../images/italy.png);

}

.japan

{

background-image: url(../images/japan.png);

}

.mexico

{

background-image: url(../images/mexico.png);

}

.nigeria

{

background-image: url(../images/nigeria.png);

}

.pakistan

{

background-image: url(../images/pakistan.png);

}

.russia

{

background-image: url(../images/russia.png);

}

.spain

{

background-image: url(../images/spain.png);

}

.south-africa

{

background-image: url(../images/south-africa.png);

}

.south-korea

{

background-image: url(../images/south-korea.png);

}

.turkey

{

background-image: url(../images/turkey.png);

}

.uk

{

background-image: url(../images/uk.png);

}

.usa

{

background-image: url(../images/usa.png);

}

.item-content

{

margin: 0;

padding: 0;

font-size: 0.875em;

}

.item-content span

{

display: inline-block;

}

</style>

As a country flag we are going to use a 32x32 pixels image. As for a progress bar we are using a simple combinations of block HTML5 elements and some CSS3 styles.

As for the data we are going to create a tree structure like this:

$scope.data = [

{

text: "Africa",

items: [ { icon: "icons algeria", content: getItemContent("Algeria", 3.48) },

{ icon: "icons egypt", content: getItemContent("Egypt", 7.81) },

{ icon: "icons ethiopia", content: getItemContent("Ethiopia", 7.92) },

{ icon: "icons nigeria", content: getItemContent("Nigeria", 16.07) },

{ icon: "icons south-africa", content: getItemContent("South Africa", 4.77) }

]

},

{

text: "Asia",

items: [

{ icon: "icons china", content: getItemContent("China", 30.85) },

{ icon: "icons india", content: getItemContent("India", 28.16) },

{ icon: "icons japan", content: getItemContent("Japan", 2.87) },

{ icon: "icons pakistan", content: getItemContent("Pakistan", 42.47) },

{ icon: "icons south-korea", content: getItemContent("South Korea", 1.14) }

]

},

{

text: "Europe",

items: [

{ icon: "icons france", content: getItemContent("France", 8.88) },

{ icon: "icons germany", content: getItemContent("Germany", 10.87) },

{ icon: "icons italy", content: getItemContent("Italy", 8.18) },

{ icon: "icons russia", content: getItemContent("Russia", 19.67) },

{ icon: "icons turkey", content: getItemContent("Turkey", 10.32) },

{ icon: "icons spain", content: getItemContent("Spain", 6.28) },

{ icon: "icons uk", content: getItemContent("United Kingdom", 8.63) }

]

},

{

text: "North America",

items: [

{ icon: "icons canada", content: getItemContent("Canada", 6.70) },

{ icon: "icons mexico", content: getItemContent("Mexico", 22.64) },

{ icon: "icons usa", content: getItemContent("USA", 60.22) }

]

},

{

text: "South America",

items: [

{ icon: "icons argentina", content: getItemContent("Argentina", 11.01) },

{ icon: "icons brazil", content: getItemContent("Brazil", 52.35) }

]

}

];

The result is shown in above demonstration.

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.