LIDOR SYSTEMS

Advanced User Interface Controls and Components

Bind AngularJS TreeView to an Arbitrary Data Source

Created: 23 Apr 2014

AngularJS TreeView directive uses a set of names for fields of items objects in tree hierarchy, which may differ from the ones used in your data source. In following sections below, we will show you how to match the fields from custom data source to the ones used by the TreeView directive.

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

Names of fields internally used by the TreeView are set in an object, which is accessible, by the dataFields attribute. Here is the list of those names:

var dataFields = {

allowDrag: 'allowDrag',

allowDrop: 'allowDrop',

content: 'content',

expanded: 'expanded',

hasChildren: 'hasChildren',

icon: 'icon',

id : 'id',

items: 'items',

pid : 'pid',

statusIcon: 'statusIcon',

style: 'style',

styleFromParent: 'styleFromParent',

text : 'text'

}

Each field name corresponds to the appropriate field of the tree item object.

In case of our demonstration above, we are using a JSON file as a data source, which has different names for its data fields.

[

{

"directoryID": 1,

"directory": "Favorites",

"directoryIcon": "computer-icons favorites",

"children": [

{ "directoryID: 11, "parentID": 1, "directory": "Desktop" },

{ "directoryID: 12, "parentID": 1, "directory": "Downloads", "directoryIcon": "computer-icons downloads" }

]

},

{

"directoryID": 2,

"directory": "Libraries",

"directoryIcon": "computer-icons folder",

"children": [

{

"directoryID": 21,

"parentID": 2,

"directory": "Documents",

"directoryIcon": "computer-icons documents",

"isExpanded": false,

"children": [

{ "directoryID": 211, "parentID": 21, "directory": "My Documents" },

{ "directoryID": 212, "parentID": 21, "directory": "Public Documents" }

]

},

{ "directoryID": 22, "parentID": 2, "directory": "Music", "directoryIcon": "computer-icons music"},

{ "directoryID": 23, "parentID": 2, "directory": "Pictures" },

{ "directoryID": 24, "parentID": 2, "directory": "Videos", "directoryIcon": "computer-icons videos" }

]

},

{

"directoryID": 3,

"directory": "Computer",

"directoryIcon": "computer-icons pc",

"isExpanded": false,

"children": [

{ "directoryID": 31, "parentID": 3, directory: "Local Disk (C:)" },

{ "directoryID": 32, "parentID": 3, directory: "Storage (D:)" }

]

},

{ "directoryID": 4, "directory": "Network", "directoryIcon": "computer-icons network" },

{ "directoryID": 5, "directory": "Recycle Bin", "directoryIcon": "computer-icons recycle" }

]

As it can be seen from this sample data, there is no field with name that matches the names in default TreeView settings. If we try to pouplate the TreeView with this sample data, we will notice that TreeView will remain empty. That is because the TreeView does not recognize the data.

To fix this, we need to match the data field names from our arbitrary data source to the ones used by the TreeView directive. For this purpose we are using the dataFields attribute, like this:

$scope.dataFields = {

expanded: 'isExpanded',

icon: 'directoryIcon',

id: 'directoryID',

items: 'children',

pid: 'parentID',

text: 'directory'

}

As it is shown in code above, the default 'text' field name is replaced with 'directory' name which is used in our sample data source. Other names are replaced accordingly.

Note There is no need to match all data fields, only those that are used by the TreeView.

Now we can call the loadData method to populate the TreeView with data from our data source.

var timer = $timeout(function(){

// Read data from a JSON file using $http methods

var dataSource = $http.get('data-source.json');

if (dataSource){

dataSource.success(function(data){

$treeService.loadData($scope.treeName, data, null, $scope.dataFields, false);

});

dataSource.error(function(data){

alert("AJAX failed to Load Data");

});

}

 

$timeout.cancel(timer);

}, 100);

<!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}}" items="data" item-icon="itemIcon"></iui-treeview>

</div>

</body>

</html>

.computer-icons

{

background-image: url(../../../resources/computer.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0 !important;

margin: 0 2px 0 0;

width: 24px;

height: 24px;

}

.empty

{

background-position: 0px 0px;

}

.folder

{

background-position: -24px 0px;

}

.downloads

{

background-position: -48px 0px;

}

.favorites

{

background-position: -72px 0px;

}

.documents

{

background-position: -96px 0px;

}

.pc

{

background-position: -120px 0px;

}

.videos

{

background-position: -144px 0px;

}

.music

{

background-position: -168px 0px;

}

.network

{

background-position: -192px 0px;

}

.recycle

{

background-position: -216px 0px;

}

.empty-doc

{

background-position: -264px 0px;

}

The fourth parameter of this method accepts an object, which contains the matching field names. By calling this method, we can load data from any arbitrary local or remote data source, where data is arranged either as a flat list or as a tree hierarchy.

The end 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.