LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Sorting


This sample demonstrates basic and custom sorting operations in TreeGrid.

If column cells contain a String or a Number as their value, a basic sorting is executed, using built-in sort operations, for which you only need to specify by which column rows will be sorted and the sort order.

For columns which cells contains custom values, a comparer function is required. In case of this example, 3rd column contains date values, and a custom comparer function is created and applied to the TreeGrid, in order sort operation to be executed.

The following properties and methods are presented:

  • sorting a property which determines the sort order
  • sort a method which sorts the TreeGrid rows and its cells based on applied order

For more information check out the source code of this sample.

<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="css/integralui.treegrid.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.treegrid.min.js"></script>

</head>

<body>

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

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" show-footer="false" column-click="onColumnClick(e)" allow-cell-focus="false" sorting="sorting" grid-lines="gridLines"></iui-treegrid>

</div>

</body>

</html>

angular

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

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){

$scope.gridName = "gridSample";

$scope.gridLines = 'vertical';

$scope.sorting = 'none';

 

$scope.columns = [

{ id: 2, headerText: "Continents/Countries", width: 250 },

{ id: 3, headerText: "Population", headerAlignment: "center", contentAlignment: "right", width: 125 },

{ id: 4, headerText: "Date", headerAlignment: "center", contentAlignment: "center", width: 140 },

{ id: 6, headerText: "Land in km2", headerAlignment: "center", contentAlignment: "right", width: 125 },

{ id: 7, headerText: "Capital", headerAlignment: "center", width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Africa",

cells: [{ cid: 2, text: "Africa" }],

rows: [

{ id: 11, pid: 1, text: "Egypt", cells: [{ cid: 2, text: "Egypt" }, { cid: 3, text: "88,311,000", value: 88311000 }, { cid: 4, text: "06 Apr 2015", value: new Date(2015, 3, 6) }, { cid: 6, text: "995,450", value: 995450 }, { cid: 7, text: "Cairo" }] },

{ id: 12, pid: 1, text: "Nigeria", cells: [{ cid: 2, text: "Nigeria" }, { cid: 3, text: "185,043,000", value: 185043000 }, { cid: 4, text: "01 Jul 2015", value: new Date(2015, 6, 1) }, { cid: 6, text: "910,768", value: 910768 }, { cid: 7, text: "Abuja" }] },

{ id: 13, pid: 1, text: "South Africa", cells: [{ cid: 2, text: "South Africa" }, { cid: 3, text: "54,002,000", value: 54002000 }, { cid: 4, text: "01 Jul 2014", value: new Date(2014, 6, 1) }, { cid: 6, text: "1,214,470", value: 1214470 }, { cid: 7, text: "Pretoria" }] }

]

},

{

id: 2,

text: "Asia",

cells: [{ cid: 2, text: "Asia" }],

rows: [

{ id: 21, pid: 2, text: "China", cells: [{ cid: 2, text: "China" }, { cid: 3, text: "1,369,140,000", value: 1369140000 }, { cid: 4, text: "06 Apr 2015", value: new Date(2015, 3, 6) }, { cid: 6, text: "9,326,410", value: 9326410 }, { cid: 7, text: "Beijing" }] },

{ id: 22, pid: 2, text: "India", cells: [{ cid: 2, text: "India" }, { cid: 3, text: "1,269,545,000", value: 1269545000 }, { cid: 4, text: "01 Jul 2015", value: new Date(2015, 6, 1) }, { cid: 6, text: "2,864,021", value: 2864021 }, { cid: 7, text: "New Delhi" }] },

{ id: 23, pid: 2, text: "Japan", cells: [{ cid: 2, text: "Japan" }, { cid: 3, text: "126,910,000", value: 126910000 }, { cid: 4, text: "01 Mar 2015", value: new Date(2015, 2, 1) }, { cid: 6, text: "364,485", value: 364485 }, { cid: 7, text: "Tokyo" }] },

{ id: 24, pid: 2, text: "Saudi Arabia", cells: [{ cid: 2, text: "Saudi Arabia" }, { cid: 3, text: "31,521,418", value: 31521418 }, { cid: 4, text: "01 Jul 2015", value: new Date(2015, 6, 1) }, { cid: 6, text: "2,149,690", value: 2149690 }, { cid: 7, text: "Riyadh" }] },

{ id: 25, pid: 2, text: "South Korea", cells: [{ cid: 2, text: "South Korea" }, { cid: 3, text: "51,342,881", value: 51342881 }, { cid: 4, text: "01 Jan 2015", value: new Date(2015, 0, 1) }, { cid: 6, text: "100,032", value: 100032 }, { cid: 7, text: "Seoul" }] }

]

},

{

id: 3,

text: "Europe",

cells: [ { cid: 2, text: "Europe" }],

rows: [

{ id: 31, pid: 3, text: "France", cells: [{ cid: 2, text: "France" }, { cid: 3, text: "66,109,000", value: 66109000 }, { cid: 4, text: "01 Mar 2015", value: new Date(2015, 2, 1) }, { cid: 6, text: "640,427", value: 640427 }, { cid: 7, text: "Paris" }] },

{ id: 32, pid: 3, text: "Germany", cells: [{ cid: 2, text: "Germany" }, { cid: 3, text: "80,925,000", value: 80925000 }, { cid: 4, text: "30 Jun 2014", value: new Date(2014, 5, 30) }, { cid: 6, text: "348,672", value: 348672 }, { cid: 7, text: "Berlin" }] },

{ id: 33, pid: 3, text: "Italy", cells: [{ cid: 2, text: "Italy" }, { cid: 3, text: "60,788,845", value: 60788845 }, { cid: 4, text: "30 Nov 2014", value: new Date(2014, 10, 30) }, { cid: 6, text: "294,140", value: 294140 }, { cid: 7, text: "Rome" }] },

{ id: 34, pid: 3, text: "Macedonia", cells: [{ cid: 2, text: "Macedonia" }, { cid: 3, text: "2,065,769", value: 2065769 }, { cid: 4, text: "31 Dec 2013", value: new Date(2013, 11, 31) }, { cid: 6, text: "25,433", value: 25433}, { cid: 7, text: "Skopje" }] }

]

},

{

id: 4,

text: "North America",

cells: [{ cid: 2, text: "North America" }],

rows: [

{ id: 41, pid: 4, text: "Canada", cells: [{ cid: 2, text: "Canada" }, { cid: 3, text: "35,702,707", value: 35702707 }, { cid: 4, text: "01 Jan 2015", value: new Date(2015, 0, 1) }, { cid: 6, text: "9,093,507", value: 9093507 }, { cid: 7, text: "Ottawa" }] },

{ id: 42, pid: 4, text: "Mexico", cells: [{ cid: 2, text: "Mexico" }, { cid: 3, text: "121,005,815", value: 121005815 }, { cid: 4, text: "01 Jul 2015", value: new Date(2015, 6, 1) }, { cid: 6, text: "1,943,945", value: 1943945 }, { cid: 7, text: "Mexico City" }] },

{ id: 43, pid: 4, text: "USA", cells: [{ cid: 2, text: "USA" }, { cid: 3, text: "320,651,000", value: 320651000 }, { cid: 4, text: "07 Apr 2015", value: new Date(2015, 3, 7) }, { cid: 6, text: "9,161,966", value: 9161966 }, { cid: 7, text: "Washington" }] }

]

},

{

id: 5,

text: "South America",

cells: [{ cid: 2, text: "South America" }],

rows: [

{ id: 51, pid: 5, text: "Argentina", cells: [{ cid: 2, text: "Argentina" }, { cid: 3, text: "43,131,966", value: 43131966 }, { cid: 4, text: "01 Jul 2015", value: new Date(2015, 6, 1) }, { cid: 6, text: "2,736,690", value: 2736690 }, { cid: 7, text: "Buenos Aires" }] },

{ id: 52, pid: 5, text: "Brazil", cells: [{ cid: 2, text: "Brazil" }, { cid: 3, text: "204,134,000", value: 204134000 }, { cid: 4, text: "08 Apr 2015", value: new Date(2015, 3, 8) }, { cid: 6, text: "8,460,415", value: 8460415 }, { cid: 7, text: "Brasília" }] }

]

}

];

 

$scope.sorting = 'none';

var sortColumn = null;

var prevColumn = null;

 

var getCellValue = function(row){

var cellValue = null;

 

if (sortColumn && row.cells){

for (var j = 0; j < row.cells.length; j++){

if (row.cells[j].cid == sortColumn.id){

cellValue = row.cells[j].value;

break;

}

}

}

 

return cellValue;

}

 

var comparer = function(firstRow, secondRow){

var x = getCellValue(firstRow);

var y = getCellValue(secondRow);

 

x = x ? x.valueOf() : null;

y = y ? y.valueOf() : null;

 

switch ($scope.sorting){

case 'ascending':

if (x < y)

return -1;

else if (x > y)

return 1;

break;

 

case 'descending':

if (x > y)

return -1;

else if (x < y)

return 1;

break;

 

default:

return 0;

}

}

 

$scope.onColumnClick = function(e){

if (e.column){

if (e.column != prevColumn){

if ($scope.sorting == 'none')

$scope.sorting = 'ascending';

}

else {

if ($scope.sorting == 'ascending')

$scope.sorting = 'descending';

else

$scope.sorting = 'ascending';

}

 

sortColumn = e.column;

prevColumn = e.column;

 

if (e.column.id == 4)

$gridService.sort($scope.gridName, e.column, $scope.sorting, comparer);

else

$gridService.sort($scope.gridName, e.column, $scope.sorting);

}

}

 

var initTimer = $timeout(function(){

sortColumn = $scope.columns[0];

 

$scope.sorting = 'ascending';

$gridService.selectedColumn($scope.gridName, sortColumn);

$gridService.sort($scope.gridName, sortColumn, $scope.sorting);

 

prevColumn = sortColumn;

 

$timeout.cancel(initTimer);

}, 100);

}]);