LIDOR SYSTEMS

Advanced User Interface Controls and Components

Change Expand Box Appearance in AngularJS TreeView

Created: 18 December 2015

When items in the TreeView directive for AngularJS have child items, an arrow icon is shown on the left side. This states that item with children can expand or collapse, by clicking on the expand box icon. The appearance of expand box icon is fully customizable, instead of using the default arrow icons, you can use any other icons.

In this article, we will show you how to replace the default icon set with custom expand box icons.

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

In above demo, expand boxes are represented by open/close folder icon, and additionally locked items display the locked folder icon.

How to Change the Expand Icon

Each part of the TreeView directive uses a specific set of CSS classes. For expand box we are using the following classes:

/* TreeView Settings */

.directive

{

border-radius: 0;

}

.iui-treeview-item

{

margin: 1px 0;

padding: 1px 3px;

}

.iui-treeview-item-content

{

margin: 0 2px;

}

 

/* Expand Box Settings */

.iui-treeview-expand-box

{

background: url(../../../resources/icons-x24.png) no-repeat 0 0;

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

}

.iui-treeview-expand-box-open

{

background-position: -120px -144px;

}

.iui-treeview-expand-box-close

{

background-position: -144px -144px;

}

.locked-item

{

background-position: -168px -144px;

}

In above classes, by changing the background and size attributes, we can change the appearance of expand box. In our example, we need open, close and locked folder icons. These icons are already present in the icon set; we only need to change the position, so that correct icon is used when item is expanded or collapsed.

How to Lock an Item and Prevent it from Expanding or Collapsing

Locking an item is not possible by default, but we can easily add custom behavior to our TreeView so that specific item can appear and behave as it is locked. In addition, there is no locked state for the expand box, so we also need to change the appearance through code by setting a custom style.

var lockedStyle = {

expandBox: {

general: 'locked-item'

}

}

 

$scope.items = [

{

id: 1,

text: "Favorites",

expanded: false,

items: [

{ id: 11, pid: 1, text: "Desktop" },

{ id: 12, pid: 1, text: "Downloads" }

]

},

{

id: 2,

text: "Libraries",

items: [

{

id: 21,

pid: 2,

text: "Documents",

expanded: false,

locked: true,

style: lockedStyle,

items: [

{ id: 211, pid: 21, text: "My Documents" },

{ id: 212, pid: 21, text: "Public Documents" }

]

},

{ id: 22, pid: 2, text: "Music" },

{ id: 23, pid: 2, text: "Pictures" },

{ id: 24, pid: 2, text: "Videos" }

]

},

{

id: 3,

text: "Computer",

expanded: false,

items: [

{ id: 31, pid: 3, text: "Local Disk (C:)" },

{ id: 32, pid: 3, text: "Storage (D:)" }

]

},

{ id: 4, text: "Network" },

{ id: 5, text: "Recycle Bin" }

];

 

$scope.onBeforeExpand = function(e){

if (e.item && e.item.locked == true)

return false;

}

<!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" before-expand="onBeforeExpand(e)"></iui-treeview>

</div>

</body>

</html>

Note By setting a custom style to items, you can modify their appearance through code, simply by stating a custom CSS class to specific part of the item.

In order for an item to appear as always collapsed (t.e. locked), we will handle the beforeExpand event and prevent the item from expanding. In our example, the Documents item is set as locked, so this item has its style set with custom CSS class for the expand box.

Conclusion

Changing the expand icon in AngularJS TreeView directive is simple. By changing the values of default CSS classes and modify the behavior of specific tree items, you can make TreeView to appear in a way that suits better within your application.

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.