LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Sorting






This sample demonstrates how to sort TreeView items in ascending or descending order. By clicking on buttons on right panel, you can see how items are sorted.

The following properties and methods are presented:

  • sorting a property which determines the sort order
  • sort a method which sorts the TreeView items based on applied order

Sorting is performed using the item text, but if item has its value field set (it has higher priority than text), the value will be used.

Although in this sample a basic sorting is used (a sorting of string values), you can create your own custom sorting by providing a comparer function as a third parameter of the sort method. In this way you can create any kind of custom sort operations.

<!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-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.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" items="data" sorting="sorting"></iui-treeview>

<div align="center" style="width:150px">

<button ng-click="sortAscending()">Ascending</button><br />

<button ng-click="sortDescending()">Descending</button><br /><br /><br />

</div>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

$scope.sorting = 'none';

 

$scope.data = [

{

id: 1,

text: "PC",

items: [

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

items: [

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

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

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

]

},

{ id: 12, pid: 1, text: "Role-Playing",

items: [

{ id: 121, pid: 12, text: "Dark Souls 2" },

{ id: 122, pid: 12, text: "Mass Effect 3" },

{ id: 123, pid: 12, text: "The Elder Scrolls V: Skyrim" },

{ id: 123, pid: 12, text: "Divinity: Original Sin" },

{ id: 123, pid: 12, text: "Fallout: New Vegas" }

]

},

{ id: 13, pid: 1, text: "Action", expanded: false,

items: [

{ id: 131, pid: 13, text: "Diablo 3" },

{ id: 132, pid: 13, text: "Gears of War" },

{ id: 133, pid: 13, text: "F.E.A.R." },

{ id: 134, pid: 13, text: "Path of Exile" },

{ id: 135, pid: 13, text: "Grand Theft Auto IV" },

{ id: 136, pid: 13, text: "Divine Divinity" },

{ id: 137, pid: 13, text: "The Witcher 2" }

]

},

{ id: 14, pid: 1, text: "Shooter", expanded: false,

items: [

{ id: 141, pid: 14, text: "Battlefield: Bad Company 2" },

{ id: 142, pid: 14, text: "Call of Duty: Black Ops" },

{ id: 143, pid: 14, text: "BioShock Infinite" },

{ id: 143, pid: 14, text: "Crysis 2" }

]

}

]

},

{

id: 2,

text: "Xbox One",

items: [

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

items: [

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

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

]

},

{ id: 22, pid: 2, text: "Adventure",

items: [

{ id: 221, pid: 22, text: "Assassin's Creed IV" },

{ id: 222, pid: 22, text: "Tomb Raider" },

{ id: 223, pid: 22, text: "Metal Gear Solid V" }

]

},

{ id: 23, pid: 2, text: "Miscellaneous", expanded: false,

items: [

{ id: 231, pid: 23, text: "Peggle 2" }

]

}

]

},

{

id: 3,

text: "PlayStation",

items: [

{ id: 31, pid: 3, text: "First-Person",

items: [

{ id: 311, pid: 31, text: "Battlefield 4" },

{ id: 312, pid: 31, text: "Call of Duty: Ghosts" },

{ id: 313, pid: 31, text: "Killzone: Shadow Fall" }

]

},

{ id: 32, pid: 3, text: "Platformer", expanded: false,

items: [

{ id: 321, pid: 32, text: "Rayman Legends" },

{ id: 322, pid: 32, text: "Rogue Legacy" },

{ id: 323, pid: 32, text: "1001 Spikes" }

]

},

{ id: 33, pid: 3, text: "MMO", expanded: false,

items: [

{ id: 333, pid: 33, text: "Final Fantasy XIV Online" }

]

}

]

}

];

 

$scope.sortAscending = function(){

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

}

 

$scope.sortDescending = function(){

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

}

}]);

button

{

margin: 5px 0;

width: 125px;

}