LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Events

Event log:

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

This sample presents most of events that are fired from TreeView directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. Here is list of events that are supported:

  • afterCollapse - Occurs after an item is collapsed
  • afterExpand - Occurs after an item is expanded
  • afterSelect - Occurs after an item is selected
  • beforeCollapse - Occurs before an item is collapsed
  • beforeExpand - Occurs before an item is expanded
  • beforeSelect - Occurs before an item is selected
  • dragEnter - Occurs when item is dragged into TreeView space
  • dragLeave - Occurs when dragged item leaves TreeView space
  • dragOver - Occurs when item is dragged over TreeView space
  • dragDrop - Occurs when drag-drop operation is completed
  • keyDown - Occurs when key is pressed down for the first time
  • keyPress - Occurs when key is pressed
  • keyUp - Occurs when key is released
  • itemCheckedChanging - Occurs before checked property value is changed
  • itemCheckedChanged - Occurs after checked property value is changed
  • itemCheckstateChanging - Occurs before checkState property value is changed
  • itemCheckstateChanged - Occurs after checkState property value is changed
  • itemClick - Occurs when item is clicked
  • itemDblclick - Occurs when item is double-clicked
  • itemHover - Occurs when the mouse cursor hovers over an item space
  • itemRightclick - Occurs when item is clicked using right mouse button
  • scrollposChanged - Occurs when position of scrollbar has changed
  • selectionChanged - Occurs when selection changes

Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.

In this sample event log will not register add/remove events, because this kind of operation is not demonstrated here.

<!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="localData" fields="dataFields" allow-drag="true" events="treeEvents" tabindex="0"></iui-treeview>

<div>

<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>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

 

var flatList = [

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

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

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

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

{ "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", checked: true },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

]

 

$scope.localData = [];

$scope.dataFields = {

id : 'id',

pid : 'pid',

text : 'text',

expanded: 'isExpanded',

dataSource : flatList

}

 

$scope.eventLog = [];

 

$scope.onAfterCollapse = function(e){

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

}

 

$scope.onAfterExpand = function(e){

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

}

 

$scope.onAfterSelect = function(e){

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

}

 

$scope.onBeforeCollapse = function(e){

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

}

 

$scope.onBeforeExpand = function(e){

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

}

 

$scope.onBeforeSelect = function(e){

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

}

 

$scope.onDragEnter = function(e){

$scope.eventLog.unshift({ name: "dragenter", info: " event was fired when item is dragged into TreeView space" });

}

 

$scope.onDragLeave = function(e){

$scope.eventLog.unshift({ name: "dragleave", info: " event was fired when dragged item leaves TreeView space" });

}

 

$scope.onDragOver = function(e){

$scope.eventLog.unshift({ name: "dragover", info: " event was fired when item is dragged over TreeView space" });

}

 

$scope.onDragDrop = function(e){

$scope.eventLog.unshift({ name: "dragdrop", info: " event was fired when drag-drop operation is completed" });

}

 

$scope.onKeyDown = function(e){

$scope.eventLog.unshift({ name: "keydown", info: " event was fired when key with code " + e.event.keyCode + " is pressed down" });

$scope.$apply();

}

 

$scope.onKeyPress = function(e){

$scope.eventLog.unshift({ name: "keypress", info: " event was fired when key with code " + e.event.keyCode + " is pressed" });

$scope.$apply();

}

 

$scope.onKeyUp = function(e){

$scope.eventLog.unshift({ name: "keyup", info: " event was fired when key with code " + e.event.keyCode + " is released" });

$scope.$apply();

}

 

$scope.onItemAdding = function(e){

$scope.eventLog.unshift({ name: "itemadding", info: " event was fired before " + e.item.text + " is added" });

}

 

$scope.onItemAdded = function(e){

$scope.eventLog.unshift({ name: "itemadded", info: " event was fired after " + e.item.text + " is added" });

}

 

$scope.onItemCheckedChanging = function(e){

$scope.eventLog.unshift({ name: "itemCheckedChanging", info: " event was fired before CheckBox value is changed, checked property value is: " + e.value });

}

 

$scope.onItemCheckedChanged = function(e){

$scope.eventLog.unshift({ name: "itemCheckedChanged", info: " event was fired after CheckBox value is changed, checked property value set to: " + e.value });

}

 

$scope.onItemRemoving = function(e){

$scope.eventLog.unshift({ name: "itemremoving", info: " event was fired before " + e.item.text + " is removed" });

}

 

$scope.onItemRemoved = function(e){

$scope.eventLog.unshift({ name: "itemremoved", info: " event was fired after " + e.item.text + " is removed" });

}

 

$scope.onItemClick = function(e){

var itemText = "TreeView";

if (e.item)

itemText = e.item.text;

 

$scope.eventLog.unshift({ name: "itemclick", info: " event was fired when " + itemText + " was clicked" });

$scope.$apply();

}

 

$scope.onItemDblClick = function(e){

var itemText = "TreeView";

if (e.item)

itemText/span> = e.item.text;

 

$scope.eventLog.unshift({ name: "itemdblclick", info: " event was fired when " + itemText/span> + " was double-clicked" });

$scope.$apply();

}

 

$scope.onItemHover = function(e){

$scope.eventLog.unshift({ name: "itemhover", info: " event was fired when the mouse cursor hovers over " + e.item.text + " space" });

$scope.$apply();

}

 

$scope.onItemRightClick = function(e){

var itemText = "TreeView";

if (e.item)

itemText = e.item.text;

 

$scope.eventLog.unshift({ name: "itemrightclick", info: " event was fired when " + itemText + " was clicked using right mouse button" });

$scope.$apply();

}

 

$scope.onSelectionChanged = function(e){

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

}

 

$scope.onScrollPosChanged = function(e){

$scope.eventLog.unshift({ name: "scrollposchanged", info: " event was fired when position of scrollbar has changed. Current scroll position is: { x: " + e.scrollPos.x + ", y: " + e.scrollPos.y + " }" });

$scope.$apply();

}

 

$scope.treeEvents = {

afterCollapse: function(e){

return $scope.onAfterCollapse(e);

},

afterExpand: function(e){

return $scope.onAfterExpand(e);

},

afterSelect: function(e){

return $scope.onAfterSelect(e);

},

beforeCollapse: function(e){

return $scope.onBeforeCollapse(e);

},

beforeExpand: function(e){

return $scope.onBeforeExpand(e);

},

beforeSelect: function(e){

return $scope.onBeforeSelect(e);

},

dragEnter: function(e){

return $scope.onDragEnter(e);

},

dragLeave: function(e){

return $scope.onDragLeave(e);

},

dragOver: function(e){

return $scope.onDragOver(e);

},

dragDrop: function(e){

return $scope.onDragDrop(e);

},

itemCheckedChanging: function(e){

return $scope.onItemCheckedChanging(e);

},

itemCheckedChanged: function(e){

return $scope.onItemCheckedChanged(e);

},

itemClick: function(e){

return $scope.onItemClick(e);

},

itemDblClick: function(e){

return $scope.onItemDblClick(e);

},

itemHover: function(e){

return $scope.onItemHover(e);

},

itemRightClick: function(e){

return $scope.onItemRightClick(e);

},

keyDown: function(e){

return $scope.onKeyDown(e);

},

keyPress: function(e){

return $scope.onKeyPress(e);

},

keyUp: function(e){

return $scope.onKeyUp(e);

},

selectionChanged: function(e){

return $scope.onSelectionChanged(e);

},

scrollPosChanged: function(e){

return $scope.onScrollPosChanged(e);

}

}

 

$scope.clearEventLog = function(){

$scope.eventLog.length = 0;

}

});

.event-block

{

background: white;

border: thin solid gray;

border-radius: 3px;

width: 350px;

height: 306px;

}

.event-log

{

list-style-type: none;

margin: 2px 0 0 0;

padding: 0;

width: 348px;

height: 277px;

overflow: auto;

}

.event-log li

{

padding-left: 15px;

}

.event-log li > span

{

color: #c60d0d;

}