LIDOR SYSTEMS

Advanced User Interface Controls and Components

AngularJS TreeView Items with CheckBox

Created: 29 July 2015

All TreeView items in by default are displayed with a label and/or an icon. The AngularJS TreeView directive comes with a built-in option to show a customizable checkbox to each item. Check boxes can accept two or tri-state values with fully customizable appearance. In this article, we will show you how to create a TreeView with checkboxes.

Similar: How to Add CheckBox to Items in TreeView for Angular 2

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



  • {{item.text}}

In order to show a check box in front of item label is simple, just set the showCheckBoxes property value to true. This will make checkboxes visible and they will be displayed using default settings, that is each check box have two state values: true or false. If we want to have tri-state values, we need to change the checkbox settings, like this:

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.checkBoxSettings = {

autoCheck: true,

threeState: true

}

}]);

<!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"></iui-treeview>

</div>

</body>

</html>

.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");

}

The autoCheck field when set to true, allows changing the checkbox value whenever item label is clicked.

At the right panel there are few different options available which determines the appearance of checkboxes. These are preset images used for each check box state, but you can use any other images. By changing the CSS styles for the checkbox, you can set the size and link to custom images. The TreeView will automatically adjust its layout.

Cascading changes to checkboxes from parent-child items

When check boxes in TreeView have three state values: 'checked', 'indeterminate' and 'unchecked', the built-in operation allows any change to a checkbox of a child item, to update the values of all related parent and child items.

Note This only happens when tri-state values are enabled, for two-state values, this functionality is disabled.

For example, when you change the checkbox value to 'checked' on some root item, you will notice that all child items will automatically become checked. Then if you change the value of some child item, the parent will change its checkbox value to 'indeterminate'.

How to get a list of all checked items

TreeView directive also comes with the getCheckList method, which retrieves a flat list of items based on criteria: checked, indeterminate or unchecked. This list also includes hidden child items (that belong to a collapsed parent item).

$scope.showCheckList = function(){

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

}

<!DOCTYPE html>

<html>

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

</html>

.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;

}

By using this method, you can quickly determine which item is checked or unchecked, as it is shown in above demonstration.

The complete source code of this sample is available as part of the IntegralUI Studio for Web product package.

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.