LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Items with Check Box




  • {{item.text}}

In this example each TreeView item has a check box, shown before its label. Check boxes are added to the TreeView using the CheckBox directive.

This sample uses the following properties and methods:

  • showCheckBoxes - determines whether TreeView will show or hide check boxes in its view
  • checkboxSettings - specifies the appearance and behavior of check boxes
  • getCheckList - a method which returns a list of items depending on their checkState field value. By default returns a list of all checked items.

Check boxes can accept either two-state (true or false) or tri-state values (checked, indeterminate or unchecked). In case of this example, we are using tri-state values.

TreeView comes with built-in checkbox cascading selection. Whenever an item's check box value changes, all parent and child items updates their check box value.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.checkbox.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.checkbox.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" show-check-boxes="true" checkbox-settings="checkBoxSettings" item-checkstate-changing="itemCheckStateChanging(e)"></iui-treeview>

<div>

<label>Show list of items depending on their check state: </label><br /><br />

<label>State: </label>

<select ng-model="currentState" ng-options="state as state for state in checkStates"></select>

<button ng-click="showCheckList()">Show</button><br />

<ul class="check-list">

<li ng-repeat="item in checkList">{{item.text}}</li>

</ul>

</div>

</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.checkStates = ['checked', 'indeterminate', 'unchecked'];

$scope.currentState = 'checked';

$scope.checkList = [];

 

$scope.items = [

{ id: 1, text: "Solution 'Application1' (1 project)", icon: "icons-medium solution" },

{

id: 2,

text: "Application1",

icon: "icons-medium documents",

items: [

{

id: 21,

pid: 2,

text: "Properties",

icon: "icons-medium properties",

expanded: false,

items: [

{ id: 211, pid: 21, text: "AssemblyInfo.cs", icon: "icons-medium assembly", checkState: 'checked' },

{ id: 212, pid: 21, text: "licenses.licx", icon: "icons-medium notes" },

{

id: 213,

pid: 21,

text: "Resources.resx",

expanded: false,

icon: "icons-medium resources",

items: [

{ id: 2131, pid: 213, text: "Resources.Designer.cs" }

]

},

{

id: 214,

pid: 21,

text: "Settings.settings",

icon: "icons-medium documents",

expanded: false,

items: [

{ id: 2141, pid: 214, text: "Settings.Designer.cs", checkState: 'checked' }

]

}

]

},

{

id: 22,

pid: 2,

text: "References",

icon: "icons-medium references",

expanded: false,

checkState: 'checked',

items: [

{ id: 221, pid: 22, text: "System" },

{ id: 222, pid: 22, text: "System.Data" },

{ id: 223, pid: 22, text: "System.Deployment" },

{ id: 224, pid: 22, text: "System.Drawing" },

{ id: 225, pid: 22, text: "System.Xml" }

]

},

{

id: 23,

pid: 2,

text: "Form1.cs",

icon: "icons-medium form",

items: [

{ id: 231, pid: 23, text: "Form1.Designer.cs" },

{ id: 232, pid: 23, text: "Form1.resx", checkState: 'checked' }

]

},

{ id: 24, pid: 2, text: "Program.cs", icon: "icons-medium new" }

]

}

];

 

var initTimer = $timeout(function(){

$treeService.updateCheckValues($scope.treeName);

 

$timeout.cancel(initTimer);

}, 1);

 

$scope.checkBoxSettings = {

autoCheck: true,

threeState: true

}

 

$scope.showCheckList = function(){

$scope.checkList = $treeService.getCheckList($scope.treeName, $scope.currentState);

}

 

$scope.itemCheckStateChanging = function(e){

if (e.value == 'unchecked')

e.item.checkState = 'checked';

}

}]);

.iui-treeview-item-content

{

padding: 4px;

}

.iui-checkbox-box

{

border: 0;

width: 16px;

height: 16px;

}

.iui-checkbox-checked

{

background-image: url("../../../resources/checkbox/checkbox-checked.png");

}

.iui-checkbox-unchecked

{

background-image: url("../../../resources/checkbox/checkbox-unchecked.png");

}

.iui-checkbox-indeterminate

{

background-image: url("../../../resources/checkbox/checkbox-indeterminate.png");

}

.check-list

{

background: white;

border: thin solid #cecece;

border-radius: 3px;

list-style-type: none;

margin: 5px 0 0 0;

overflow: auto;

padding: 0;

width: 250px;

height: 215px;

}

.check-list li

{

padding-left: 15px;

}