LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Drag Drop to TreeView



This sample demonstrates how to drag-drop items between TreeView and TreeGrid.

When item from TreeView is dragged over the TreeGrid space, a tooltip will appear stating targeting row and position at which dragged item will be dropped. In this process when item is dropped, a row is automatically created using the data from the tree item.

In similar way, when row from TreeGrid is dragged over TreeView space, a tooltip will appear stating the targeting item and the position at which row will be dropped. When row is dropped, an item is created using only the row text, and cells that belong to the row are not displayed.

In both cases, all data is sustained, only in case of dropping a tree item, because there are no cells for item objects, they are internally created by the built-in functionality of the TreeGrid.

In this example whenever an item or row is drag-dropped, the icon of their parent changes. Depending on whether there are child objects the icon is changed to folder icon, if there are no chidren icon changes to a file icon. This functionality is added in this sample code, by handling drag-drop and remove events for both components.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.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.treeview.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-treeview name="{{treeName}}" items="treeData" allow-drag="true" allow-drop="true" item-icon="itemIcon" drag-drop="treeDrop(e)" item-removing="objRemoving(e)" item-removed="objRemoved(e)" allow-focus="false"></iui-treeview>

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" allow-drag="true" allow-drop="true" show-footer="false" row-icon="itemIcon" drag-drop="gridDrop(e)" row-removing="objRemoving(e)" row-removed="objRemoved(e)" allow-focus="false"></iui-treegrid>

</div>

</body>

</html>

angular

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

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", "IntegralUITreeGridService", function($scope, $treeService, $gridService){

$scope.treeName = "treeSample";

$scope.gridName = "gridSample";

$scope.itemIcon = "icons-medium file";

 

var parentObj = null;

 

$scope.treeData = [

{

id: 1,

text: "Item1",

icon: "icons-medium folder",

items: [

{

id: 11,

pid: 1,

text: "Item11",

icon: "icons-medium folder",

expanded: false,

items: [

{ id: 111, pid: 11, text: "Item111" },

{ id: 112, pid: 11, text: "Item112" }

]

},

{ id: 12, pid: 1, text: "Item12" }

]

},

{

id: 2,

text: "Item2",

icon: "icons-medium folder",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Item21" }

]

},

{

id: 3,

text: "Item3",

}

];

 

 

$scope.columns = [

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

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

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

];

 

$scope.rows = [

{

id: 4,

text: "Item41",

icon: "icons-medium folder",

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

rows: [

{

id: 41,

pid: 4,

text: "Item411",

cells: [{ text: "Item411" }, { text: "Item412" }, { text: "Item413" }]

},

{

id: 42,

pid: 4,

text: "Item421",

icon: "icons-medium folder",

expanded: false,

cells: [{ text: "Item421" }, { text: "Item422" }, { text: "Item423" }],

rows: [

{

id: 421,

pid: 42,

text: "Item4211",

cells: [{ text: "Item4211" }, { text: "Item4212" }, { text: "Item4213" }]

}

]

}

]

},

{

id: 5,

text: "Item51",

icon: "icons-medium folder",

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

rows: [

{

id: 51,

pid: 5,

text: "Item511",

cells: [{ text: "Item511" }, { text: "Item512" }, { text: "Item513" }]

}

]

}

];

 

$scope.treeDrop = function(e){

changeObjIcon(e.dragItem);

}

 

$scope.gridDrop = function(e){

changeObjIcon(e.dragRow);

}

 

var changeObjIcon = function(obj){

if (obj){

if ((obj.type == 'item' && obj.items && obj.items.length > 0) || (obj.type == 'row' && obj.rows && obj.rows.length > 0))

obj.icon = "icons-medium folder";

else

obj.icon = "icons-medium file";

 

// Update the icon for parent objects

var updateTimer = $timeout(function(){

var parent = getParent(obj);

changeObjIcon(parent);

 

$timeout.cancel(updateTimer);

}, 1);

}

}

 

// Get parent object of specified object (item or row)

var getParent = function(obj){

switch (obj.type){

case 'item':

return $treeService.getItemParent($scope.treeName, obj);

 

case 'row':

return $gridService.getRowParent($scope.gridName, obj);

}

 

return null;

}

 

$scope.objRemoving = function(e){

parentObj = getParent(e.obj);

}

 

$scope.objRemoved = function(e){

changeObjIcon(parentObj);

}

}]);

.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell

{

padding: 0 2px;

}

.iui-treegrid-row-cell-content

{

padding: 2px 2px;

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.folder

{

background-position: -24px 0px;

}

.file

{

background-position: -24px -48px;

}