LIDOR SYSTEMS

Advanced User Interface Controls and Components

Sorting in AngularJS TreeView

Created: 14 July 2015

IntegralUI TreeView directive for AngularJS comes with built-in sorting operation which sort items in ascending or descending order based on item's text. In some cases we may need to sort items in different way based on some custom value, for this purpose we can only to apply a sort value to the item's value field. In other cases for more specific scenarios, we can create custom sort operations and apply it to the TreeView. All of this is supported, and in following sections of this article, you will learn how to implement it in your application code.

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







The sort order by which items in TreeView directive are sorted is determined from sorting property, which can be set from HTML specification:

angular

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

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){

$scope.data = [];

$scope.treeName = "treeSample";

 

$scope.sorting = 'none';

}]);

<!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="data" show-check-boxes="true" sorting="sorting" item-checked-changed="onCheckedChanged(e)"></iui-treeview>

</div>

</body>

</html>

.iui-checkbox-box

{

border: 0;

width: 16px;

height: 16px;

}

.iui-checkbox-checked

{

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

}

.iui-checkbox-unchecked

{

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

}

.iui-checkbox-indeterminate

{

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

}

By default sorting is disabled, and it can become enabled by either adding the 'ascending' or 'descending' value to the property. The other way to change the sort order is by setting it directly in the sort method.

$treeService.sort($scope.treeName, 'ascending');

When sort order is applied, and new item added or removed from the TreeView, is placed on correct position within the tree hierarchy.

All items in TreeView are sorted using their text value. If item have its value field set, then this will be used during sort operations. For example, you need to display a tree hierarchy using only labels, but you want to sort them using numeric values. This is possible by simply adding two values to each TreeView item, like this:

$scope.data = [

{

id: 1,

text: "PC",

value: 1,

items: [

{ id: 11, pid: 1, text: "Driving/Racing", value: 11, expanded: false,

items: [

{ id: 111, pid: 11, text: "DiRT 3", value: 111 },

{ id: 112, pid: 11, text: "Ridge Racer Unbounded", value: 112 },

{ id: 113, pid: 11, text: "TrackMania 2", value: 113 }

]

}

]

},

{

id: 2,

value: 2,

text: "Xbox One",

value: 2,

items: [

{ id: 21, pid: 2, text: "Sports", value: 21, expanded: false,

items: [

{ id: 211, pid: 21, text: "FIFA 14", value: 211 },

{ id: 212, pid: 21, text: "Madden NFL 25", value: 212 }

]

}

]

}

];

In our case, we are using the item id as our sorting value. But you can use any other value, including custom objects like Date object.

To simplify our demonstration above, we are using only text values. Initially TreeView is not sorted. By clicking on Ascending or Descending button, you will see how the order of parent and child items changes.

Custom Sort Operations

If built-in sort operations are not suited for your application requirements, you can create your own custom sort operation. It is simple, you only need to create a comparer function and then apply it to the sort method of the TreeView.

For example, let us create sorting of TreeView items based on their checkbox value. All checked items would appear first, followed by unchecked items. In this case our comparer function is:

var comparer = function(firstItem, secondItem){

var x = firstItem.checked != undefined ? firstItem.checked : null;

var y = secondItem.checked != undefined ? secondItem.checked : null;

 

if (x > y)

return -1;

else if (x < y)

return 1;

 

return 0;

}

The call to the sort method is now:

$treeService.sort($scope.treeName, null, comparer);

In above demo, whenever the Sort Checked button is clicked, all items will reorder based whether they are checked or unchecked. First will appear checked items followed by unchecked items.

The complete sample code 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.