LIDOR SYSTEMS

Advanced User Interface Controls and Components

Multiple Selection in AngularJS TreeView

Created: 13 February 2015

By default TreeView allows selection of one item. In following sections we will show you how to select multiple items using two different options available in AngularJS TreeView directive.

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






Similar: Select Multiple Items in Angular 2 TreeView

In order to allow multiple selection of items in TreeView directive, at first we need to change the value of selectionMode property. This property determines how many items can be selected at the same time and also changes the way items are selected. There are four acceptable values:

  • 'none' - selection is disabled
  • 'one' - Only one item can be selected
  • 'multi-simple' - Multiple items can be selected using mouse clicks or CTRL key
  • 'multi-extended' - Multiple items can be selected using mouse clicks or CTRL and/or SHIFT key

First option disables any kind of selection of tree items. An item can still receive the input focus, but will never become selected.

By default selectionMode property value is set to ‘one’, which means that single selection is enabled, and only one item can become selected.

angular

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

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

$scope.treeName = 'treeSample';

$scope.selMode = 'multi-extended';

 

$scope.data = [

{

id: 1,

text: "Item1",

items: [

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

{

id: 12,

pid: 1,

text: "Item12",

items: [

{ id: 121, pid: 12, text: "Item121" },

{

id: 122,

pid: 12,

text: "Item122",

expanded: false,

items: [

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

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

]

},

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

{ id: 124, pid: 12, text: "Item124" },

{ id: 125, pid: 12, text: "Item125" }

]

},

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

{

id: 14,

pid: 1,

text: "Item14",

items: [

{ id: 141, pid: 14, text: "Item141" },

{ id: 142, pid: 14, text: "Item142" }

]

}

]

},

{

id: 2,

text: "Item2",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Item21" },

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

{

id: 23,

pid: 2,

text: "Item23",

expanded: false,

items: [

{ id: 231, pid: 23, text: "Item231" },

{ id: 232, pid: 23, text: "Item232" }

]

}

]

},

{ id: 3, text: "Item3" },

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

{ id: 5, text: "Item5" },

{

id: 6,

text: "Item6",

items: [

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

{ id: 62, pid: 6, text: "Item62" }

]

},

{ id: 7, text: "Item7" }

];

});

<!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" selection-mode="{{selMode}}" tabindex="0"></iui-treeview>

<div>

<label>Choose Selection Type</label><br /><br />

<label><input type="radio" ng-model="selMode" value="none" />None</label><br />

<label><input type="radio" ng-model="selMode" value="one" />One</label><br />

<label><input type="radio" ng-model="selMode" value="multi-simple" />Multi-Simple</label><br />

<label><input type="radio" ng-model="selMode" value="multi-extended" />Multi-Extended</label><br />

</div>

</div>

</body>

</html>

There are two ways to allow selection of multiple items in TreeView directive, when selectonMode property value is set either to ‘multi-simple’ or ‘multi-extended’.

Multi-Simple Selection

When 'multi-simple' option is enabled, you can use mouse clicks to select items. This works with or without pressing the CTRL key. If item is already selected, when clicked will become deselected.

On the other hand, if we can use only keyboard to navigate through the tree hierarchy and select items. In this case, if we want to preserve current selection, we need to use CTRL key and pressing the SPACE key the item will become selected. By pressing the SPACE key for the same time the item will become deselected.

Multi-Extended Selection

The 'multi-extended' option, works in similar way like it is explained above. One difference is that now you may use the SHIFT key to select items that are far from each other. For example by clicking on top item, you can hold the SHIFT key and click on the last item and all items between clicked items will become selected. Other difference is that you can’t simply click on an item to select it; you must hold the CTRL key to select/deselect an item.

In both cases, multiple items can become selected. This collection of selected items is preserved internally, and in order to get access of it, you need to use the selectedItems method. This method is available as part of the IntegralUITreeView service, and can be accessed by using the name of the TreeView directive. Here is an example:

$scope.treeName = 'sampleTree';

 

var selItems = $treeService.selectedItems($scope.treeName);

<iui-treeview name="{{treeName}}" items="data" selection-mode="multi-extended"></iui-treeview>

Above demonstration presents all four ways of item selection that are supported in TreeView directive for AngularJS.

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.