Event log:
- {{ev.name}}{{ev.info}}
TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 02 April 2015
Whenever a row or column is selected in AngularJS Tree Grid, few events are fired which can be handled in your application code. In following sections you will learn how to handle these events and set custom conditions which can stop selection process.
Event log:
Selection process is accompanied with the following events, fired in this order:
The same events are fired during selection of both columns and rows. Depending on value of object's type field, you can determine whether a column or a row is selected.
At first, in order to handle these events we can use a separate attribute for each event, or preferred way is to use the events attribute. Here is an example:
$scope.gridEvents = {
afterSelect: function(e){
return $scope.onAfterSelect(e);
},
beforeSelect: function(e){
return $scope.onBeforeSelect(e);
},
selectionChanged: function(e){
return $scope.onSelectionChanged(e);
}
}
<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" events="gridEvents" show-footer="false"></iui-treegrid>
And the code for our event handlers is:
$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();
}
In our example during selection process, our event log shows the order by which events are fired. The code which adds data to the event log is added to each event handler.
In case of beforeSelect event, we can set up a custom condition which when met will stop the selection process. In our example, whenever orders for customer 'Frankenversand' are clicked, the selection process is cancelled.
if (e.object.pid == 2){
isEventCancelled = true;
eventText += '. Selection was cancelled.';
}
We can determine this first by identifying whether a row is about to become selected, and then because all orders have their parent identifier set, we can determine whether a specified order belongs to a customer which orders are excluded from selection. In our case, the customer 'Frankenversand' has its identfier set to 2, so any order with their parent id set to 2 will be exempt from the selection. If condition we have set is fulfilled, we can cancel the process by returning a false value at the end of the event.
You may also notice that event log in this case, will only show that beforeSelect event is fired, without firing the afterSelect and selectionChanged events.
In general if we want to stop any selection from taking place, we can simply handle this event and return false, without specifying any condition.
$scope.onBeforeSelect = function(e){
return false;
}