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: 11 September 2015
Drag Drop operations are fully supported in IntegralUI Tree Grid for AngularJS. You can drag drop multiple rows within the same grid or between two or more grids. In following sections of this article, we will show you how to enable drag drop in grid directive and how to select and reorder multiple rows.
Although the demonstration above shows only drag drop operation in AngularJS Grids that is already built-in, you can create your own custom drag drop functionality by simply overriding dragOver and/or dragDrop events.
Similar: Drag Drop Multiple Rows in Grid for Angular 4
By default drag and drop in grid is disabled. In order to enable it, we need to set the values of following properties to true:
For example, by clicking on checkboxes below each grid in above demonstration, you can determine whether rows from the left grid can only be dragged and the rows in the second grid can only accept other rows to be dropped. In this way the left grid can act as a source and the second grid can act as a target:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
// The name of the first grid used as unique identifier
$scope.gridName = gridSample";
// The name of the second grid used as unique identifier
$scope.gridName2 = "gridSample2";
// Allow drag drop operations in first grid
$scope.allowDrag = true;
$scope.allowDrop = true;
// Allow drag drop operations in second grid
$scope.allowDrag2 = true;
$scope.allowDrop2 = true;
// Functions that change the drag drop permissions in first grid
$scope.toggleAllowDrag = function(){
$scope.allowDrag = !$scope.allowDrag;
}
$scope.toggleAllowDrop = function(){
$scope.allowDrop = !$scope.allowDrop;
}
// Functions that change the drag drop permissions in second grid
$scope.toggleAllowDrag2 = function(){
$scope.allowDrag2 = !$scope.allowDrag2;
}
$scope.toggleAllowDrop2 = function(){
$scope.allowDrop2 = !$scope.allowDrop2;
}
});
<div>
<iui-treegrid name="{{gridName}}" columns="columns1" rows="rows1" allow-drag="allowDrag" allow-drop="allowDrop" style="width:400px;margin-right:30px" selection-mode="multi-extended"></iui-treegrid>
<iui-treegrid name="{{gridName2}}" columns="columns2" rows="rows2" allow-drag="allowDrag2" allow-drop="allowDrop2" style="width:400px;" selection-mode="multi-extended"></iui-treegrid>
<br style="clear:both;"/>
</div>
<div>
<div style="float:left;width:400px;margin-right:30px" align="center">
<label style="margin-right:30px"><input type="checkbox" ng-click="toggleAllowDrag()" checked="checked" /> Allow Drag</label>
<label><input type="checkbox" ng-click="toggleAllowDrop()" checked="checked" /> Allow Drop</label>
</div>
<div style="float:left;width:400px;" align="center">
<label style="margin-right:30px"><input type="checkbox" ng-click="toggleAllowDrag2()" checked="checked" /> Allow Drag</label>
<label><input type="checkbox" ng-click="toggleAllowDrop2()" checked="checked" /> Allow Drop</label>
</div>
<br style="clear:both;"/>
</div>
The above settings are for all rows. In similar way, we can choose which rows can participate in drag drop operations, by setting the values of following fields of specified row:
In this way, you can create custom scenarios with specific conditions on how drag drop operations are executed. For example, in order to prevent first row to be dragged, we can set the allowDrag field to false:
// Prevent first row to be draggable by setting the value of allowDrag field to false
$scope.rows1 = [
{
allowDrag: false,
id: 1,
text: "Item1",
cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
rows: [
{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
{
id: 14,
pid: 1,
text: "Item14",
cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
rows: [
{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
]
}
]
},
{
id: 2,
text: "Item2",
cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
expanded: false,
rows: [
{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
]
}
];
This will still allow this specified row to accept other rows to drop over it, but will never be dragged itself.
Note By default all rows have their allowDrag and allowDrop fields set to true.
Multiple selections of rows in Grid directive by default is disabled. Only row can become selected at one time. To enable multiple row selection, at first we need to set the selectionMode property value to 'multi-extended'.
Sample: Multiple Selection in AngularJS Tree Grid
Now that we have multiple row selection enabled, and drag drop enabled from previous settings, we can start reordering of multiple rows. The process is simple: left-click on some row, then hold SHIFT or CTRL key, and left-click on some other row, this will select multiple rows.
Next left-click and move the mouse cursor a little so that drag and drop operation starts. By moving the mouse cursor (while still holding the left mouse button pressed) over some rows in the same grid or to other grid, a different tooltip will appear stating whether dragged rows can be dropped or the drop position. If the drop position is valid, all dragged rows will be moved to that position and placed as a child of target row, its parent or to the root of the tree hierarchy.
Related: Create a Copy Row and Drag Drop in Grid for AngularJS
Note When multiple rows are dragged, they cannot drop over a row that is also dragged, or to child of some dragged row. There are multiple built-in conditions, which prevents unwanted drag drop operation.
There is not much code in this sample, because most of the functionality is already built-in the Grid directive. Nevertheless, you can download the IntegralUI Studio for Web - AngularJS, and get access to the complete sample source code.