LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Events


Event log:

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

This sample presents most of events that are fired from TreeGrid 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 demonstrated:

  • afterCollapse - Occurs after a row is collapsed
  • afterExpand - Occurs after a row is expanded
  • afterSelect - Occurs after column or row is selected
  • beforeCollapse - Occurs before a row is collapsed
  • beforeExpand - Occurs before a row is expanded
  • beforeSelect - Occurs before column or row is selected
  • cellClick - Occurs when cell is clicked
  • cellvalueChanging - Occurs before cell value field changes its value
  • cellvalueChanged - Occurs after cell value field changes its value
  • columnClick - Occurs when column header is clicked
  • columnDblclick - Occurs when column header is double-clicked
  • columnHover - Occurs when the mouse cursor hovers over a column header space
  • columnRightclick - Occurs when column header is clicked using right mouse button
  • columnSizechanged - Occurs when column width has changed
  • dragEnter - Occurs when row is dragged into TreeGrid space
  • dragLeave - Occurs when dragged row leaves TreeGrid space
  • dragOver - Occurs when row is dragged over TreeGrid 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
  • rowClick - Occurs when row is clicked
  • rowDblclick - Occurs when row is double-clicked
  • rowHover - Occurs when the mouse cursor hovers over a row space
  • rowRightclick - Occurs when row is clicked using right mouse button
  • scrollposChanged - Occurs when scroll position 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 these kind of operations are not demonstrated here.

<!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="sampleColumns" rows="sampleRows" row-icon="defaultIcon" allow-drag="true" allow-drop="true" label-edit="true" events="gridEvents" show-footer="false" tabindex="0"></iui-treegrid>

<div class="event-block">

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

<p style="margin:0 10px; padding: 3px; 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", ["$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.onAfterCollapse = function(e){

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

}

 

$scope.onAfterExpand = function(e){

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

}

 

$scope.onAfterLabelEdit = function(e){

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

}

 

$scope.onAfterSelect = function(e){

var eventText = "";

if (e.object){

if (e.object.headerText)

eventText = e.object.headerText;

else

eventText = e.object.text;

}

 

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

}

 

$scope.onBeforeCollapse = function(e){

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

}

 

$scope.onBeforeExpand = function(e){

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

}

 

$scope.onBeforeLabelEdit = function(e){

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

}

 

$scope.onBeforeSelect = function(e){

var eventText = "";

if (e.object){

if (e.object.headerText)

eventText = e.object.headerText;

else

eventText = e.object.text;

}

 

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

}

 

$scope.onColumnClick = function(e){

var columnText = "TreeGrid";

if (e.column)

columnText = e.column.headerText;

 

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

$scope.$apply();

}

 

$scope.onColumnDblClick = function(e){

var columnText = "TreeGrid";

if (e.column)

columnText = e.column.headerText;

 

$scope.eventLog.unshift({ name: "columnDblclick", info: " event was fired when " + columnText + " was double-clicked" });

$scope.$apply();

}

 

$scope.onColumnHover = function(e){

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

$scope.$apply();

}

 

$scope.onColumnRightClick = function(e){

var columnText = "TreeGrid";

if (e.column)

columnText = e.column.headerText;

 

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

$scope.$apply();

}

 

$scope.onColumnSizeChanged = function(e){

$scope.eventLog.unshift({ name: "columnSizeChanged", info: " event was fired when width of " + e.column.headerText + " has changed, width set to: " + e.column.width + " pixels" });

}

 

$scope.onDragEnter = function(e){

$scope.eventLog.unshift({ name: "dragEnter", info: " event was fired when row is dragged into TreeGrid space" });

}

 

$scope.onDragLeave = function(e){

$scope.eventLog.unshift({ name: "dragLeave", info: " event was fired when dragged row leaves TreeGrid space" });

}

 

$scope.onDragOver = function(e){

var dragText = "TreeGrid";

if (e.targetRow)

dragText = e.targetRow.text;

 

$scope.eventLog.unshift({ name: "dragOver", info: " event was fired when row is dragged over " + dragText + " space" });

}

 

$scope.onDragDrop = function(e){

var dropText = "TreeGrid";

if (e.targetRow)

dropText = e.targetRow.text;

 

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

}

 

$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.onRowClick = function(e){

var text = "TreeGrid";

if (e.row)

text = e.row.text;

 

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

$scope.$apply();

}

 

$scope.onRowDblClick = function(e){

var text = "TreeGrid";

if (e.row)

text = e.row.text;

 

$scope.eventLog.unshift({ name: "rowDblclick", info: " event was fired when " + text + " was double-clicked" });

$scope.$apply();

}

 

$scope.onRowHover = function(e){

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

$scope.$apply();

}

 

$scope.onRowRightClick = function(e){

var text = "TreeGrid";

if (e.row)

text = e.row.text;

 

$scope.eventLog.unshift({ name: "rowRightclick", info: " event was fired when " + text + " 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.$apply();

 

$scope.onScrollPosChanged = function(e){

$scope.eventLog.unshift({ name: "scrollposChanged", info: " event was fired. Current scroll position is: { x: " + e.scrollPos.x + ", y: " + e.scrollPos.y + " }" });

$scope.$apply();

}

 

$scope.gridEvents = {

afterCollapse: function(e){

return $scope.onAfterCollapse(e);

},

afterExpand: function(e){

return $scope.onAfterExpand(e);

},

afterLabelEdit: function(e){

return $scope.onAfterLabelEdit(e);

},

afterSelect: function(e){

return $scope.onAfterSelect(e);

},

beforeCollapse: function(e){

return $scope.onBeforeCollapse(e);

},

beforeExpand: function(e){

return $scope.onBeforeExpand(e);

},

beforeLabelEdit: function(e){

return $scope.onBeforeLabelEdit(e);

},

beforeSelect: function(e){

return $scope.onBeforeSelect(e);

},

columnClick: function(e){

return $scope.onColumnClick(e);

},

columnDblClick: function(e){

return $scope.onColumnDblClick(e);

},

columnHover: function(e){

return $scope.onColumnHover(e);

},

columnRightClick: function(e){

return $scope.onColumnRightClick(e);

},

columnSizeChanged: function(e){

return $scope.onColumnSizeChanged(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);

},

keyDown: function(e){

return $scope.onKeyDown(e);

},

keyPress: function(e){

return $scope.onKeyPress(e);

},

keyUp: function(e){

return $scope.onKeyUp(e);

},

rowClick: function(e){

return $scope.onRowClick(e);

},

rowDblClick: function(e){

return $scope.onRowDblClick(e);

},

rowHover: function(e){

return $scope.onRowHover(e);

},

rowRightClick: function(e){

return $scope.onRowRightClick(e);

},

selectionChanged: function(e){

return $scope.onSelectionChanged(e);

},

scrollPosChanged: function(e){

return $scope.onScrollPosChanged(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: 200px;

}

.event-log

{

list-style-type: none;

margin: 2px 0 0 0;

padding: 0;

height: 170px;

overflow: auto;

}

.event-log li

{

padding-left: 15px;

}

.event-log li > span

{

color: #c60d0d;

}