LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Selection Events


Event log:

  • {{ev.name}}{{ev.info}}

This sample presents how to handle selection events in TreeGrid directive, AngularJS. Whenever a column or row is selected, the following events are fired:

  • afterSelect - Occurs after column or row is selected
  • beforeSelect - Occurs before column or row is selected
  • selectionChanged - Occurs when selection changes

The event object carried with beforeSelect and afterSelect events, can be either colum or a row object. Depending on value of object's type field, you can determine whether a column or a row is selected.

By handling beforeSelect event you can prevent object from becoming selected, based on custom conditions set in your code. In our example, whenever orders for customer 'Frankenversand' are clicked, the selection process is cancelled.

<!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="{{treeName}}" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" events="gridEvents" show-footer="false"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.sampleRows = [];

$scope.defaultIcon = "icons-medium empty-doc";

 

$scope.sampleColumns = [

{ id: 1, headerText: "Customer/Order ID", headerAlignment: "center", width: 180 },

{ id: 2, headerText: "Ordered", headerAlignment: "center", contentAlignment: "center", width: 90 },

{ id: 3, headerText: "Shipped", headerAlignment: "center", contentAlignment: "center", width: 90 },

{ id: 4, headerText: "Ship Via", headerAlignment: "center", width: 125 },

{ id: 5, headerText: "Freight", headerAlignment: "center", contentAlignment: "right", width: 80 },

{ id: 6, headerText: "Address", headerAlignment: "center", width: 200 },

{ id: 7, headerText: "City", headerAlignment: "center" },

{ id: 8, headerText: "Country", headerAlignment: "center" }

];

 

$scope.flatData = [

{

id: 1,

icon: "icons-medium people",

text: "Piccolo und mehr",

cells: [{ cid: 1, text: "Piccolo und mehr" }, { cid: 6, text: "Geislweg 14" }, { cid: 7, text: "Salzburg" }, { cid: 8, text: "Austria" }]

},

{

id: 11,

pid: 1,

text: "Order #10259",

cells: [{ cid: 1, text: "10259" }, { cid: 2, text: "9/13/2012" }, { cid: 3, text: "9/27/2012" }, { cid: 4, text: "Federal Shipping" }, { cid: 5, text: "360.63" }]

},

{

id: 12,

pid: 1,

text: "Order #11094",

cells: [{ cid: 1, text: "11094" }, { cid: 2, text: "1/20/2013" }, { cid: 3, text: "2/5/2013" }, { cid: 4, text: "Federal Shipping" }, { cid: 5, text: "200.14" }]

},

{

id: 2,

icon: "icons-medium people",

text: "Frankenversand",

cells: [{ cid: 1, text: "Frankenversand" }, { cid: 6, text: "Berliner Platz 43" }, { cid: 7, text: "Munchen" }, { cid: 8, text: "Germany" }]

},

{

id: 21,

pid: 2,

text: "Order #11536",

cells: [{ cid: 1, text: "11536" }, { cid: 2, text: "12/9/2013" }, { cid: 3, text: "1/7/2014" }, { cid: 4, text: "Speedy Express" }, { cid: 5, text: "85.53" } ]

},

{

id: 22,

pid: 2,

text: "Order #14472",

cells: [{ cid: 1, text: "14472" }, { cid: 2, text: "11/14/2014" }, { cid: 3, text: "11/25/2014" }, { cid: 4, text: "Speedy Express" }, { cid: 5, text: "112.30" } ]

},

{

id: 3,

icon: "icons-medium people",

text: "Laughing Bacchus Wine Cellars",

cells: [{ cid: 1, text: "Laughing Bacchus Wine Cellars" }, { cid: 6, text: "1900 Oak St." }, { cid: 7, text: "Vancouver" }, { cid: 8, text: "Canada" }]

},

{

id: 31,

pid: 3,

text: "Order #11495",

cells: [{ cid: 1, text: "11495" }, { cid: 2, text: "8/7/2013" }, { cid: 3, text: "9/20/2013" }, { cid: 4, text: "United Package" }, { cid: 5, text: "49.28" } ]

}

];

 

$scope.eventLog = [];

 

$scope.onAfterSelect = function(e){

var eventText = "";

switch (e.object.type){

case 'column':

eventText = e.object.headerText;

break;

 

default:

eventText = e.object.text;

break;

}

 

$scope.eventLog.unshift({ name: 'afterSelect', info: ' event was fired for object: ' + eventText + '.' });

$scope.$apply();

}

 

$scope.onBeforeSelect = function(e){

var eventText = "";

var isEventCancelled = false;

 

if (e.object){

switch (e.object.type){

case 'column':

eventText = e.object.headerText;

break;

 

default:

eventText = e.object.text;

 

if (e.object.pid == 2){

isEventCancelled = true;

 

eventText += '. Selection was cancelled.';

}

break;

}

}

 

$scope.eventLog.unshift({ name: 'beforeSelect', info: ' event was fired for object: ' + eventText });

$scope.$apply();

 

if (isEventCancelled)

return false;

}

 

$scope.onSelectionChanged = function(e){

$scope.eventLog.unshift({ name: 'selectionChanged', info: ' event was fired when current selection has changed.' });

$scope.$apply();

}

 

$scope.gridEvents = {

afterSelect: function(e){

return $scope.onAfterSelect(e);

},

beforeSelect: function(e){

return $scope.onBeforeSelect(e);

},

selectionChanged: function(e){

return $scope.onSelectionChanged(e);

}

}

 

$scope.clearEventLog = function(){

$scope.eventLog.length = 0;

}

 

var loadTimer = $timeout(function(){

$gridService.loadData($scope.gridName, $scope.flatData, null, null, true);

$timeout.cancel(loadTimer);

}, 1);

}]);

.event-block

{

background: white;

border: thin solid gray;

border-radius: 3px;

width: 800px;

height: 155px;

}

.event-log

{

list-style-type: none;

margin: 2px 0 0 0;

padding: 0;

height: 125px;

overflow: auto;

}

.event-log li

{

padding-left: 15px;

}

.event-log li > span

{

color: #c60d0d;

}