LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Status Icons



In this sample you can show/hide status icons for items in TreeView widget. By clicking on check box on the right, you can change the built-in properties:

  • showStatusIcons - determines whether an icon is shown to the far left side of the item space

There are two ways to apply a status icon to an item:

  • By using CSS to set the class for status-icon attribute of specific item.
  • By using CSS to set the class for statusIcon variable of specific item. For example:

    item.statusIcon = 'icons question';

<!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" show-status-icons="showStatusIcons"></iui-treeview>

<label><input type="checkbox" ng-click="toggleStatus()" checked="checked" /> Show Status Icons</label><br />

</div>

</body>

</html>

angular

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

.controller("appCtrl", function($scope){

$scope.treeName = "treeSample";

$scope.showStatusIcons = true;

 

$scope.data = [

{

id: 1,

text: "Books",

statusIcon: "icons question",

items: [

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

{

id: 12,

pid: 1,

text: "Business",

items: [

{ id: 121, pid: 12, text: "Economics", statusIcon: "icons exclamation" },

{

id: 122,

pid: 12,

text: "Investing",

expanded: false,

items: [

{ id: 1221, pid: 122, text: "Bonds" },

{ id: 1222, pid: 122, text: "Options" },

{ id: 1223, pid: 122, text: "Stocks" }

]

},

{ id: 123, pid: 12, text: "Management" },

{ id: 124, pid: 12, text: "Small Business" }

]

},

{ id: 13, pid: 1, text: "Health" },

{ id: 14, pid: 1, text: "Literature" }

]

},

{ id: 2, text: "Computers" },

{

id: 3,

text: "Electronics",

expanded: false,

items: [

{ id: 31, pid: 3, text: "Camera" },

{ id: 32, pid: 3, text: "Cell Phones" },

{ id: 33, pid: 3, text: "Video Game Consoles" }

]

},

{

id: 5,

text: "Software",

items: [

{ id: 52, pid: 5, text: "Operating Systems" },

{ id: 53, pid: 5, text: "Network & Servers", statusIcon: "icons down" },

{ id: 54, pid: 5, text: "Security" }

]

},

{

id: 6,

text: "Sports",

expanded: false,

statusIcon: "icons up",

items: [

{ id: 61, pid: 6, text: "Baseball" },

{ id: 62, pid: 6, text: "Martial Arts" },

{ id: 63, pid: 6, text: "Running" },

{

id: 64,

pid: 6,

text: "Tennis",

expanded: false,

items: [

{ id: 641, pid: 64, text: "Accessories" },

{ id: 642, pid: 64, text: "Balls" },

{ id: 643, pid: 64, text: "Racquets" }

]

}

]

}

];

 

$scope.toggleStatus = function(){

$scope.showStatusIcons = !$scope.showStatusIcons;

}

});

.icons

{

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

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0;

width: 16px;

height: 16px;

}

.down

{

background-position: -80px -32px;

}

.exclamation

{

background-position: 0px -32px;

}

.question

{

background-position: -16px -32px;

}

.up

{

background-position: -64px -32px;

}