LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Data Binding


In this sample we are using an arbitrary data source to load the content of TreeView. In order this to work, you need to match the data fields from your data source to the fields of item objects. You can use any custom names for your data, as long as you match those names with object fields, the TreeView will be populated.

For purpose of data binding, we are using the dataFields attribute which accepts an object containing all names for the data fields (this property can also be used as parameter in loadData method, as it is in this example case). This property allows you to link fields from your data source to the fields of item objects in the TreeView.

Default settings for this property are:

dataFields = {

allowDrag: 'allowDrag',

allowDrop: 'allowDrop',

content: 'content',

contextMenu: 'contextMenu',

expanded: 'expanded',

hasChildren: 'hasChildren',

icon: 'icon',

id : 'id',

items: 'items',

pid : 'pid',

statusIcon: 'statusIcon',

text : 'text'

}

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

<iui-treeview name="{{treeName}}" items="items" item-icon="itemIcon"></iui-treeview>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

$scope.itemIcon = "icons-medium empty-doc";

$scope.items = [];

 

$scope.dataSource = [

{

directoryID: 1,

directory: "Favorites",

directoryIcon: "icons-medium favorites",

children: [

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

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

]

},

{

directoryID: 2,

directory: "Libraries",

directoryIcon: "icons-medium folder",

children: [

{

directoryID: 21,

parentID: 2,

directory: "Documents",

directoryIcon: "icons-medium 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: "icons-medium music" },

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

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

]

},

{

directoryID: 3,

directory: "Computer",

directoryIcon: "icons-medium pc",

isExpanded: false,

children: [

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

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

]

},

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

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

];

 

$scope.dataFields = {

expanded: 'isExpanded',

icon: 'directoryIcon',

id: 'directoryID',

items: 'children',

pid: 'parentID',

text: 'directory'

}

 

var initTimer = $timeout(function(){

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

$treeService.selectedItem($scope.treeName, $scope.dataSource[1].children[0]);

 

$timeout.cancel(initTimer);

}, 1);

}]);

.iui-treeview-item-content

{

padding: 4px;

}