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: 09 April 2015
Drag&Drop operations in AngularJS Tree Grid component are accompanied with several events which can be handled in your application code. By adding event handlers in your code, you can set custom conditions from which a different operation can be executed. In code below some of these events are presented with conditions that alter the default drag drop operation.
In above demonstration the Tree Grid consists of a group of customers, each with several placed orders. By default, when drag drop operation is allowed, each row can be moved and placed in different position in tree hierarchy. It can be placed either above, below or as a child of a target row. Although in general this functionality is desired, in some cases based on application requirements, we may need to change this and create custom drag drop operation.
Note By dragging a specific order you may notice that mouse cursor changes, and a tooltip is shown whenever a drop position is allowed.
In our example, orders from different customers are prevented from moving. You can only reorder orders within the same customer, but you can't move a specific order from one customer to another. You can still change the order of customers, in whole with their orders. Additonally, an order cannot become a child of another order. This is all handled by simple conditions set in event handlers for drag drop events.
$scope.onDragOver = function(e){
// Check whether there is dragging and target row, in order to set our conditions
if (e.dragRow && e.targetRow){
// Prevent dragged row to be dropped outside its parent row
// In our example this means orders of one customer cannot move to another customer
if (e.dragRow.parentID != e.targetRow.parentID)
return false;
// Each row cannot become a child of target row
// In our example this means orders cannot be placed inside another order
else if (e.dropPos == 0 && e.dragRow.parentID == e.targetRow.parentID)
return false;
}
}
$scope.onDragDrop = function(e){
// If dragged row is dropped over Tree Grid space, the drop operation is cancelled
// In our example this means that orders cannot become placed as customers, meaning as root rows
if (e.dropPos == -1 && e.dragRow && e.dragRow.parentID)
return false;
}
<!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="columns" rows="rows" allow-drag="true" allow-drop="true" show-footer="false" drag-over="onDragOver(e)" drag-drop="onDragDrop(e)"></iui-treegrid>
</div>
</body>
</html>
As it can be seen from code above, in dragOver event handler we are checking whether dragged row belongs to the same parent row as currently targeted row. If they belong to a different parent row, the drop operation is cancelled by returning a false value.
Furthermore, to prevent a row to become a child of another row, we are using the e.dropPos field to check whether the drop position is set to 0 (which means dragged row will be placed as child row or targeted row). If this condition is fulfilled, the drop operation is also cancelled.
A handler for dragDrop event prevents rows which represents orders (in our example), from dropping in Tree Grid space. By checking the value of drop position, if it is equal to -1, this means that there is no targeting row, and the dragged row is currently over Tree Grid space. If this is true, then the drop operation is cancelled by returning a false value. This condition applies only for orders, and not for customers. Customers can still drop over Tree Grid space.
As a result, we have created a custom drag drop operation that allows reordering of customers and orders, without disrupting relations among our data. All orders will remain within the same customer.