Advanced User Interface Controls and Components
Event log:
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:
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;
}