TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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.
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.