LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Drag Drop




In this sample you can drag-drop rows within the same TreeGrid or from left TreeGrid to the right TreeGrid and vice versa. When row is dragged a drop marker is displayed showing the exact location at which dragged row can drop. If the marker is not shown, the drop position is not allowed.

While dragging an row over middle space of some target row, when dropped the row will be added as a child of the target row.

Multiple selection of rows is enabled, which allows multiple rows to be dragged and dropped.

By clicking on check boxes, you can change the built-in properties:

  • allowDrag - determines whether rows can be dragged
  • allowDrop - determines whether rows can be dropped


<!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="columns1" rows="rows1" allow-drag="allowDrag" allow-drop="allowDrop" selection-mode="multi-extended"></iui-treegrid>

<iui-treegrid name="{{gridName}}" columns="columns2" rows="rows2" allow-drag="allowDrag2" allow-drop="allowDrop2" selection-mode="multi-extended"></iui-treegrid>

<div>

<div>

<label><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>

<label><input type="checkbox" ng-click="toggleAllowDrag2()" checked="checked" /> Allow Drag</label>

<label><input type="checkbox" ng-click="toggleAllowDrop2()" checked="checked" /> Allow Drop</label>

</div>

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", function($scope){

$scope.gridName = "gridSample";

$scope.gridName2 = "gridSample2";

 

$scope.allowDrag = true;

$scope.allowDrop = true;

$scope.allowDrag2 = true;

$scope.allowDrop2 = true;

 

$scope.columns1 = [

{ headerText: "Header1", footerText: "Footer1", width: 150 },

{ headerText: "Header2", footerText: "Footer2", width: 200 },

{ headerText: "Header3", footerText: "Footer3" }

];

 

$scope.rows1 = [

{

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: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] },

{ id: 124, pid: 12, text: "Item124", cells: [{ text: "Item1241" }, { text: "Item1242" }, { text: "Item1243" }] },

{ id: 125, pid: 12, text: "Item125", cells: [{ text: "Item1251" }, { text: "Item1252" }, { text: "Item1253" }] }

]

},

{ 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" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] },

{ id: 4, text: "Item4", cells: [{ text: "Item41" }, { text: "Item42" }, { text: "Item43" }] },

{ id: 5, text: "Item5", cells: [{ text: "Item51" }, { text: "Item52" }, { text: "Item53" }] },

{

id: 6,

text: "Item6",

cells: [{ text: "Item61" }, { text: "Item62" }, { text: "Item63" }],

rows: [

{ id: 61, pid: 6, text: "Item61", cells: [{ text: "Item611" }, { text: "Item612" }, { text: "Item613" }] },

{ id: 62, pid: 6, text: "Item62", cells: [{ text: "Item621" }, { text: "Item622" }, { text: "Item623" }] }

]

},

{ id: 7, text: "Item7", cells: [{ text: "Item71" }, { text: "Item72" }, { text: "Item73" }] }

];

 

$scope.columns2 = [

{ headerText: "Header1", footerText: "Footer1", width: 150 },

{ headerText: "Header2", footerText: "Footer2", width: 200 },

{ headerText: "Header3", footerText: "Footer3" }

];

 

$scope.rows2 = [];

 

$scope.toggleAllowDrag = function(){

$scope.allowDrag = !$scope.allowDrag;

}

 

$scope.toggleAllowDrop = function(){

$scope.allowDrop = !$scope.allowDrop;

}

 

$scope.toggleAllowDrag2 = function(){

$scope.allowDrag2 = !$scope.allowDrag2;

}

 

$scope.toggleAllowDrop2 = function(){

$scope.allowDrop2 = !$scope.allowDrop2;

}

});