LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Selection Events

Event log:

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

This sample presents how to handle selection events in TreeView directive, AngularJS. Whenever an item is selected, the following events are fired:

  • afterSelect - Occurs after item is selected
  • beforeSelect - Occurs before item is selected
  • selectionChanged - Occurs when selection changes

By handling beforeSelect event you can prevent items from becoming selected, based on custom conditions set in your code. In our example, whenever child items under 'Dairy' category are clicked, the selection process is cancelled.

<!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="localData" fields="dataFields" events="treeEvents"></iui-treeview>

<div>

<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>

<p style="margin:0 10px; padding: 5px; border-bottom: thin solid #c5c5c5">Event log:</p>

<ul class="event-log">

<li ng-repeat="ev in eventLog"><span>{{ev.name}}</span>{{ev.info}}</li>

</ul>

</div>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

 

var flatList = [

{ "id": "1", "text": "Dairy", "isExpanded": false },

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

{ "id": "12", "pid": "1", "text": "Butter" },

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

{ "id": "14", "pid": "1", "text": "Yogurt" },

{ "id": "2", "text": "Fruits" },

{ "id": "21", "pid": "2", "text": "Berries", "isExpanded": false },

{ "id": "211", "pid": "21", "text": "BlackBerries" },

{ "id": "212", "pid": "21", "text": "CranBerries" },

{ "id": "213", "pid": "21", "text": "StrawBerries" },

{ "id": "22", "pid": "2", "text": "Pits", checked: true },

{ "id": "23", "pid": "2", "text": "Core", checked: true },

{ "id": "24", "pid": "2", "text": "Citrus Fruits", "isExpanded": false },

{ "id": "241", "pid": "24", "text": "Oranges" },

{ "id": "242", "pid": "24", "text": "Lemons" },

{ "id": "25", "pid": "2", "text": "Melons" },

{ "id": "26", "pid": "2", "text": "Tropical Fruits" },

{ "id": "261", "pid": "26", "text": "Avocados" },

{ "id": "262", "pid": "26", "text": "Bananas" },

{ "id": "263", "pid": "26", "text": "Dates" },

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

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

{ "id": "41", "pid": "4", "text": "Beef" },

{ "id": "42", "pid": "4", "text": "Lamb", "isExpanded": false },

{ "id": "421", "pid": "42", "text": "Lamb Breast" },

{ "id": "422", "pid": "42", "text": "Lamb Leg" },

{ "id": "423", "pid": "42", "text": "Lamb Ribs" },

{ "id": "43", "pid": "4", "text": "Pork" },

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

{ "id": "6", "text": "Vegetables" },

{ "id": "7", "text": "Water"}

]

 

$scope.localData = [];

$scope.dataFields = {

id : 'id',

pid : 'pid',

text : 'text',

expanded: 'isExpanded',

dataSource : flatList

}

 

$scope.eventLog = [];

 

$scope.onAfterSelect = function(e){

$scope.eventLog.unshift({ name: "afterselect", info: " event was fired for item: " + e.item.text });

$scope.$apply();

}

 

$scope.onBeforeSelect = function(e){

var eventText = e.item.text;

var isEventCancelled = false;

 

if (e.item.pid == 1){

isEventCancelled = true;

 

eventText += '. Selection was cancelled.';

}

 

$scope.eventLog.unshift({ name: "beforeselect", info: " event was fired for item: " + eventText });

$scope.$apply();

 

if (isEventCancelled)

return false;

}

 

$scope.onSelectionChanged = function(e){

$scope.eventLog.unshift({ name: "selectionchanged", info: " event was fired when selection changes" });

$scope.$apply();

}

 

$scope.treeEvents = {

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;

}

});

.event-block

{

background: white;

border: thin solid gray;

border-radius: 3px;

width: 450px;

height: 405px;

}

.event-log

{

list-style-type: none;

margin: 2px 0 0 0;

padding: 0;

height: 375px;

overflow: auto;

}

.event-log li

{

padding-left: 15px;

}

.event-log li > span

{

color: #c60d0d;

}